Skip to content

Commit

Permalink
Update publishable views to Alpine (#260)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryanmitchell
ryanmitchell authored Nov 28, 2024
1 parent e01badb commit 1dd1312
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 33 deletions.
8 changes: 4 additions & 4 deletions resources/views/cart.antlers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

<h1 class="mb-10 text-5xl font-bold leading-tight tracking-tighter">{{ title }}</h1>

<div id="ss-cart">
<p :class="{ 'hidden' : Alpine.store('statamic.shopify.cart').lineItems.length > 0 }">Looks like there isn't anything in your basket. <br><br>
<div x-data>
<p :class="Alpine.store('statamic.shopify.cart').lineItems.length > 0 ? 'hidden' : ''">Looks like there isn't anything in your basket. <br><br>
<a href="/products" class="inline-block px-4 py-2 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700">Continue Shopping</a>
</p>

<div :class="{ 'hidden' : Alpine.store('statamic.shopify.cart').lineItems.length < 1 }">
<div :class="Alpine.store('statamic.shopify.cart').lineItems.length < 1 ? 'hidden' : ''">
<div class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-white">
Expand All @@ -30,7 +30,7 @@ <h1 class="mb-10 text-5xl font-bold leading-tight tracking-tighter">{{ title }}<
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<template x-for="line in Alpine.store('statamic.shopify.cart').lineItems">
<template x-for="line in Alpine.store('statamic.shopify.cart').lineItems">
<tr>
<td class="px-6 py-4 whitespace-nowrap" colspan="2">
<div class="flex items-center">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/fields/variant_form.antlers.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{{ if (variants | count) > 1 }}
<select name="ss-product-variant" id="ss-product-variant" class="ss-variant-select {{ params.class }}">
<select name="ss-product-variant" class="ss-variant-select {{ params.class }}">
{{ variants }}
<option value="{{ slug }}" data-in-stock="{{ if __out_of_stock }}false{{ else }}true{{ /if }}"{{ if __out_of_stock }} disabled{{ /if }}>{{ __translated_string }}</option>
{{ /variants }}
</select>
{{ else }}
<input type="hidden" name="ss-product-variant" id="ss-product-variant" value="{{ variants.0.slug }}">
<input type="hidden" name="ss-product-variant" value="{{ variants.0.slug }}">
{{ /if }}
49 changes: 25 additions & 24 deletions resources/views/product.antlers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ <h1 class="mb-10 text-5xl font-bold leading-tight tracking-tighter">{{ title }}<

<div class="md:grid md:grid-cols-2 md:gap-10">
<div class="mb-6 grid-cell md:mb-0">
<picture class="relative block overflow-hidden shadow-lg aspect-w-1 aspect-h-1 rounded-3xl">
<picture class="relative block overflow-hidden shadow-lg aspect-square rounded-3xl">
{{ featured_image }}
<img class="absolute object-cover w-full h-full" src="{{ url }}" alt="{{ alt }}">
{{ /featured_image }}
</picture>
</div>

{{ $variants = {shopify:variants} }}
<div class="grid-cell" x-data='statamic.shopify.product({{ options | to_json }}, {{ variants | to_json }})'>
<div class="grid-cell" x-data='shopifyProduct({{ options | to_json }}, {{ variants | to_json }})'>
<div class="mb-8 prose">{{ content }}</div>

{{ if type }}
Expand All @@ -45,34 +45,34 @@ <h1 class="mb-10 text-5xl font-bold leading-tight tracking-tighter">{{ title }}<
</div>
{{ /if }}

{{ if {shopify:in_stock} }}
<form class="mt-5" @submit.prevent="handleSubmit($event.target)">
<input type="hidden" name="product_id" id="ss-product-id" value="{{ product_id }}" />
{{ if {shopify:in_stock :product="slug"} }}
<form @submit.prevent='handleSubmit($event.target);'>
<input type="hidden" name="product_id" id="ss-product-id" value="{{ product_id }}" />

{{ shopify:variants:generate show_price="true" show_out_of_stock="true" class="hidden" }}
{{ shopify:variants:generate show_price="true" show_out_of_stock="true" class="hidden" }}

<div class="flex mb-3" x-show="variants.length > 1">
<template x-for="(option, index) in options">
<div class="block w-1/2 px-2 py-3 mr-4 border">
<label class="block my-2" x-text="option"></label>
<div class="flex mb-3" x-show="variants.length > 1">
<template x-for="(option, index) in options">
<div class="block my-2">
<label class="block my-2" x-text="option"></label>

<select @change="optionChange(index, $event.target.value)">
<option disabled x-text="'Choose ' + option"></option>
<template x-for="value in getOptions(index)">
<option :value="value" x-text="value" :selected="(selected[index] ?? false) == value">
</template>
</select>
<select @change="optionChange(index, $event.target.value)">
<option disabled x-text="'Choose ' + option"></option>
<template x-for="value in getOptions(index)">
<option :value="value" x-text="value" :selected="(selected[index] ?? false) == value">
</template>
</select>

</div>
</template>
</div>
</div>
</template>
</div>

<div class="flex mb-3">
<input type="number" min="1" value="1" x-ref="qty" name="quantity" class="w-20 p-2 border" />
</div>
<div class="flex mb-3">
<input type="number" min="1" value="1" x-ref="qty" class="w-20 p-2 border" />
</div>

<button type="submit" :disabled="! (allOptionsSelected() && variantExistsAndIsInStock())" class="px-4 py-2 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700">Add to Cart</button>
</form>
<button type="submit" :disabled="! (allOptionsSelected() && variantExistsAndIsInStock())" class="px-4 py-2 text-base font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700" x-text="added ? 'Added!' : 'Add to cart'">Add to Cart</button>
</form>
{{ else }}
<p class="mt-5 mb-2 font-medium">Out of Stock</p>

Expand All @@ -81,3 +81,4 @@ <h1 class="mb-10 text-5xl font-bold leading-tight tracking-tighter">{{ title }}<
</div>
</div>
</div>

6 changes: 3 additions & 3 deletions tests/Unit/TagsTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ public function outputs_product_variants_generate()

$tagOutput = (string) $this->tag('{{ shopify:variants:generate show_price="true" show_out_of_stock="true" }}', ['slug' => 'obi-wan']);

$this->assertEquals('<input type="hidden" name="ss-product-variant" id="ss-product-variant" value="obi-wan-tshirt">', trim($tagOutput));
$this->assertEquals('<input type="hidden" name="ss-product-variant" value="obi-wan-tshirt">', trim($tagOutput));

$variant2 = Facades\Entry::make()->data([
'title' => 'Another T-shirt',
Expand All @@ -168,7 +168,7 @@ public function outputs_product_variants_generate()
$tagOutput = str_replace(["\r", "\n", "\t"], '', $tagOutput);
$tagOutput = preg_replace('/\>\s+\</m', '><', trim($tagOutput));

$this->assertEquals('<select name="ss-product-variant" id="ss-product-variant" class="ss-variant-select "><option value="obi-wan-tshirt" data-in-stock="true">T-shirt - £9.99</option><option value="obi-wan-tshirt-2" data-in-stock="true">Another T-shirt - £10.99</option></select>', $tagOutput);
$this->assertEquals('<select name="ss-product-variant" class="ss-variant-select "><option value="obi-wan-tshirt" data-in-stock="true">T-shirt - £9.99</option><option value="obi-wan-tshirt-2" data-in-stock="true">Another T-shirt - £10.99</option></select>', $tagOutput);

$variant->merge([
'inventory_quantity' => 0,
Expand All @@ -178,7 +178,7 @@ public function outputs_product_variants_generate()
$tagOutput = str_replace(["\r", "\n", "\t"], '', $tagOutput);
$tagOutput = preg_replace('/\>\s+\</m', '><', trim($tagOutput));

$this->assertEquals('<select name="ss-product-variant" id="ss-product-variant" class="ss-variant-select "><option value="obi-wan-tshirt" data-in-stock="false" disabled>T-shirt - £9.99</option><option value="obi-wan-tshirt-2" data-in-stock="true">Another T-shirt - £10.99</option></select>', $tagOutput);
$this->assertEquals('<select name="ss-product-variant" class="ss-variant-select "><option value="obi-wan-tshirt" data-in-stock="false" disabled>T-shirt - £9.99</option><option value="obi-wan-tshirt-2" data-in-stock="true">Another T-shirt - £10.99</option></select>', $tagOutput);

}

Expand Down

0 comments on commit 1dd1312

Please sign in to comment.