Merge pull request #6 from GetStoreConnect/update/liquid-templates-v-…

…0.11.6

Templates liquid 0.11.6 version

templates/blocks/featured_products.liquid

@@ -21,7 +21,9 @@
       <div class="SC-CardCarousel_track">
         {%- for product in content_block.products %}
           <div class="SC-CardCarousel_item">
-            {%- render "products/card", product: product %}
+            {%- cache "product", items: [product, current_store, current_customer] -%}
+              {%- render "products/card", product: product %}
+            {%- endcache -%}
           </div>
         {%- endfor %}
       </div>

templates/pages/additional_payment.liquid

@@ -0,0 +1,23 @@
+<div class='sc-container sc-container-skinny sc-container-spacious' data-general-error-message="{{ "checkout.payment.error" | t }}">
+  <a href="{{ current_order.path }}" class="SC-Link sc-mb-large">
+    {{ "accounts.orders.navigation.back_to_show" | t }}
+  </a>
+  <div class="SC-Panel_header">
+    <div class="SC-Panel_header_heading">
+      {{ "checkout.payment.header" | t }}
+    </div>
+  </div>
+
+   <div class="SC-Grid">
+     <div class="SC-Grid_main">
+        {%- if current_order.total_payable <= 0 %}
+          {{ "additional_payments.not_required" | t }}
+        {%- else %}
+          {% render "checkout/payment_information/select_and_payment" %}
+        {%- endif %}
+     </div>
+     <div class="SC-Grid_summary sc-mb-base">
+      {% render "orders/order_summary", source: current_order %}
+     </div>
+   </div>
+ </div>

templates/pages/checkout.liquid

@@ -0,0 +1,40 @@
+<div class="sc-container sc-container-skinny sc-container-spacious">
+  <h1>
+    {{ "checkout.title" | t }}{% if current_cart.test_order? %} - TESTING ONLY {% endif %}
+  </h1>
+  <div class="SC-Grid">
+    <div class="SC-Grid_main">
+      {%- case current_checkout_step %}
+      {%- when "customer_information" %}
+        {%- form "checkout-customer-information",
+              id: 'SC-CheckoutShippingForm',
+              class: 'SC-Panel SC-Panel-numbered',
+              data-required-fields-form: true %}
+          {% render "form_errors", errors: form.errors %}
+          {% render "checkout/customer_information/form", form: form %}
+        {%- endform %}
+      {%- when "shipping_information" %}
+        {%- form "checkout-shipping-information",
+              class: 'SC-Panel SC-Panel-numbered' %}
+          {% render "form_errors", errors: form.errors %}
+          {% render "checkout/shipping_information/form", form: form %}
+        {%- endform %}
+      {%- when "accept_terms" %}
+        {%- form "checkout-accept-terms",
+              id: 'SC-CheckoutTerms',
+              class: 'SC-Panel SC-Panel-numbered' %}
+          {% render "form_errors", errors: form.errors %}
+          {% render "checkout/accept_terms/form", form: form %}
+        {%- endform %}
+      {%- when "payment_information" %}
+        {% render "checkout/payment_information/page" %}
+      {%- endcase %}
+    </div>
+    <div class="SC-Grid_summary">
+      {% render "orders/order_summary", source: current_cart %}
+      {% render "checkout/account_credit" %}
+      {% render "checkout/vouchers" %}
+      {% render "checkout/promo_code" %}
+    </div>
+  </div>
+</div>

templates/pages/location.liquid

@@ -8,11 +8,11 @@
 {%- endunless %}
 {%- assign google_maps_api_key = store_variables['google_maps_api_key'] %}
 
-<article data-location-search class="sc-pos-relative sc-border-bottom sc-md:flex-row">
+<article data-location-record class="sc-pos-relative sc-border-bottom sc-md:flex-row">
   <section
     itemscope itemtype="https://schema.org/LocalBusiness"
     class="sc-md:40vw sc-lg:30vw sc-no-shrink sc-pos-relative sc-flex-col sc-shadow-2">
-    <div class="sc-shadow-2 sc-p-base">
+    <div class="sc-p-base">
       <a href="{{ nav_path }}" class="sc-color-primary sc-flex-row sc-gap-tiny sc-align-items-center">
         {%- render "icons/chevron", width: 12, style_class: "sc-rotate-90" %}
         <span>{{ nav_label }}</span>
@@ -83,15 +83,15 @@
   {%- unless google_maps_api_key == blank %}
     {%- render "shared/loader", active: true, contextual: true %}
     <div
-      data-location-search-map
+      data-location-map
       data-title="{{ location.name }}"
       data-lat="{{ location.latitude }}"
       data-lng="{{ location.longitude }}"
       class="sc-bg-shade-lightest sc-color-primary"
       style="width: 100%; height: 100%;"></div>
   {%- else %}
     <iframe
-      data-location-search-map
+      data-location-map
       class="sc-bg-shade-lightest"
       style="width: 100%; height: calc(100vh);"
       frameborder="0"
@@ -103,7 +103,12 @@
   {%- endunless %}
 </article>
 
-<script src="{{ 'location-search.js' | asset_url }}"></script>
 {%- unless google_maps_api_key == blank %}
-  <script async src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=places&callback=StoreConnect.LocationSearch.initWithMap&v=weekly"></script>
+  <script>
+    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+      key: "{{ google_maps_api_key }}",
+      v: "weekly"
+    });
+  </script>
+  <script src="{{ 'location.js' | asset_url }}"></script>
 {%- endunless %}

templates/pages/locations.liquid

@@ -1,26 +1,74 @@
 {%- default location_group: blank -%}
 {%- default filter_product: blank -%}
-
+{%- default found_locations: "no-search" -%}
 {%- assign google_maps_api_key = store_variables['google_maps_api_key'] %}
+{%- assign initial_location = current_store.location_finder.fallback_initial_location %}
+
+{%- render "locations/forms/exact",
+    location_group: location_group,
+    filter_product: filter_product,
+    found_locations: found_locations %}
+{%- render "locations/forms/near",
+    location_group: location_group,
+    filter_product: filter_product,
+    found_locations: found_locations,
+    google_maps_api_key: google_maps_api_key %}
 
-<article id="location-search-{{ location_group.identifier }}">
-  {%- unless google_maps_api_key == blank %}
-    {%- render "locations/forms/near",
-      location_group: location_group,
-      filter_product: filter_product,
-      found_locations: found_locations,
-      google_maps_api_key: google_maps_api_key %}
-  {%- else %}
-    {%- render "locations/forms/exact",
-      location_group: location_group,
-      filter_product: filter_product,
-      found_locations: found_locations %}
-  {%- endunless %}
-</article>
+{%- unless google_maps_api_key == blank %}
+  <article
+    data-location-search
+    id="location-search-{{ location_group.identifier }}"
+    class="sc-pos-relative sc-bg-lightest sc-md:flex-row"
+  >
+    <section class="sc-pos-relative sc-flex-col overflow-hidden sc-md:40vw sc-lg:30vw sc-no-shrink sc-shadow-2">
+      <h1 class="sc-mb-small sc-hide">{{ location_group.name }}</h1>
+      {% comment %} Location form {% endcomment %}
+      <div data-location-search-form class="sc-p-small"></div>
+      {% comment %} Found locations {% endcomment %}
+      {%- unless found_locations == "no-search" %}
+        <div data-locations class="sc-pos-relative sc-flex-col sc-gap-small sc-p-small sc-overflow-y-scroll">
+          {%- for match in found_locations %}
+            {%- render "locations/result_card",
+              match: match,
+              google_maps_api_key: google_maps_api_key,
+              distance_unit: current_request.params.distance_unit %}
+          {%- endfor %}
+        </div>
+      {%- endunless %}
+    </section>
+    {% comment %} Location map {% endcomment %}
+    <section
+      data-location-map
+      class="sc-color-primary"
+      style="width: 100%; height: 100%;"
+    ></section>
+  </article>
+  <script>
+    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+      key: "{{ google_maps_api_key }}",
+      v: "weekly"
+    });
+  </script>
+  <script src="{{ 'locations.js' | asset_url }}"></script>
 
-<script src="{{ 'location-search.js' | asset_url }}"></script>
-{%- if google_maps_api_key == blank %}
-  <script>window.StoreConnect.LocationSearch.init()</script>
+{% comment %} Without google API {% endcomment %}
 {%- else %}
-  <script async src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=places&callback=StoreConnect.LocationSearch.initWithMap&v=weekly"></script>
-{%- endif %}
+  <article data-location-search id="location-search-{{ location_group.identifier }}">
+    <section class="sc-p-small sc-pos-relative sc-flex-col">
+      <div data-location-search-form
+        style="max-width: 500px; width: 100%; margin: 0 auto;"
+        class="sc-p-base"></div>
+      {%- unless found_locations == "no-search" %}
+        <div data-locations class="sc-container sc-overflow-x-scroll sc-flex-wrap sc-flex-col sc-gap-small" style="max-height: 420px;">
+          {%- for match in found_locations %}
+            {%- render "locations/result_card",
+              match: match,
+              google_maps_api_key: google_maps_api_key,
+              distance_unit: current_request.params.distance_unit %}
+          {%- endfor %}
+        </div>
+      {%- endunless %}
+    </section>
+  </article>
+   <script src="{{ 'locations.js' | asset_url }}"></script>
+{%- endunless %}

templates/pages/product.liquid

@@ -0,0 +1,147 @@
+{%- cache "product", items: [current_product, current_store, current_customer, current_cart] %}
+  <div data-remote-target="product">
+    {%- assign is_bundle = current_product.bundle_lead? %}
+
+    <div>
+      <div class="sc-container sc-me" id="SC-product-{{ current_product.slug }}">
+        {%- render "breadcrumbs" %}
+
+        <section class="SC-ProductDisplay{% if is_bundle %} ProductDisplay-bundle{% endif %}" id="SC-ProductDisplay">
+          {%# Images %}
+          <div class="SC-ProductDisplay_images" id="SC-ProductDisplayImages">
+            {%- render "products/product/images", product: current_product %}
+          </div>
+
+          <div class="SC-ProductDisplay_details sc-flex-col sc-gap-small" id="SC-ProductDisplayDetails">
+            <header class="sc-flex-col sc-gap-small">
+              {%# Brand %}
+              {%- if current_product.brand %}
+                <div>{{ current_product.brand.name }}</div>
+              {%- endif %}
+
+              {%# Name %}
+              <div>
+                <h1 class="sc-m-none">{{ current_product.name }}</h1>
+                {%- if current_product.discontinued? %}
+                  {{ "products.show.discontinued" | t }}
+                {%- endif %}
+              </div>
+
+              {%# Code %}
+              <div class="sc-font-small sc-shade-dark">
+                {{ current_product.product_code }}
+              </div>
+
+              {%# Price %}
+              {%- unless is_bundle %}
+                {% render "products/product/price", product: current_product %}
+              {%- endunless %}
+
+              {%# Out of stock %}
+              {%- if current_product.out_of_stock? %}
+                <div class="sc-color-error sc-font-medium sc-mb">
+                  {{ current_product.out_of_stock_text }}
+                </div>
+              {%- endif %}
+
+              {%# Restricted %}
+              {%- if current_product.restricted? %}
+                {% render "products/restricted", product: current_product %}
+              {%- endif %}
+
+              {%- unless is_bundle %}
+                {%# Variant Selector %}
+                {% render "products/product/variant_selector", product: current_product %}
+
+                {%# Add to cart %}
+                <div class="sc-mb">
+                  {% render "products/product/add_to_cart", product: current_product %}
+                </div>
+
+                {%# Summary %}
+                <div class="sc-mb sc-mt">
+                  <div>{{ current_product.summary_content }}</div>
+                  {%# Tax exclusion %}
+                  {%- unless current_product.pricing.hide_price? or current_store.tax_inclusive? or current_product.restricted_text %}
+                    {% if current_product.pricing.price > 0 %}
+                      <div class="SC-ExcludesTax">
+                        {{ "products.show.excluding_tax" | t }}
+                      </div>
+                    {% endif %}
+                  {% endunless %}
+                </div>
+              {%- endunless %}
+            </header>
+
+            {%# Bundle configuration %}
+            {%- if is_bundle %}
+              {%# Price %}
+              {% if current_product.pricing.has_price? %}
+                <div data-bundle-price></div>
+              {% endif %}
+
+              {%# Product options %}
+              <section id="SC-BundleProducts" class="sc-pos-relative" style="min-height: 300px">
+                <div data-bundle="{{ current_product.id }}" class="sc-flex-col sc-gap">
+                  {%- render "shared/loader", active: true %}
+                  {{ "products.show.loading_bundles" | t }}
+                </div>
+              </section>
+            {%- else %}
+              {%# Delivery and pickup %}
+              <div class="sc-mb">
+                {%- render "products/product/inventory", product: current_product %}
+              </div>
+
+              {%# Warranty %}
+              {%- render "products/product/warranty", product: current_product %}
+
+              {%# Support %}
+              {%- render "products/product/support", product: current_product %}
+
+              {%# Downloads %}
+              {%- render "products/product/downloads", product: current_product %}
+            {%- endif %}
+          </div>
+        </section>
+
+        {%- if is_bundle %}
+          <div data-bundle-anchor-variants></div>
+        {%- else %}
+          <div class="sc-mb-spacious" class="SC-ProductContentBlocks" id="SC-ProductContentBlocks">
+            {%# Features %}
+            {%- if current_product.features_content != blank %}
+              <section class="SC-ProductFeatures sc-mb-spacious">
+                <h4 class="SC-ProductFeatures_title">{{ current_product.features_label }}</h4>
+                <div class="sc-rich-text sc-mb">
+                  <div>
+                    {{ current_product.features_content }}
+                  </div>
+                </div>
+              </section>
+            {%- endif %}
+
+            {%# Specifications %}
+            {%- if current_product.specifications_content != blank %}
+              <section class="SC-ProductSpecifications sc-mb-spacious">
+                <h4 class="SC-ProductSpecifications_title">{{ current_product.specifications_label }}</h4>
+                <div class="sc-rich-text sc-mb">
+                  <div>
+                    {{ current_product.specifications_content }}
+                  </div>
+                </div>
+              </section>
+            {%- endif %}
+          </div>
+        {%- endif %}
+
+        {% render "products/product/json-ld", product: current_product %}
+
+        {%# Related products %}
+        <section class="sc-mb">
+          {% render "products/related_products", product: current_product %}
+        </section>
+      </div>
+    </div>
+  </div>
+{%- endcache %}