From d96c233ef62837781ae9193728cfcf66c8d6862f Mon Sep 17 00:00:00 2001 From: reiddk Date: Sat, 1 Sep 2018 09:18:24 -0600 Subject: [PATCH 1/4] feat(Bold Product-Discount): duplicate and hide discounted items setup (#184) --- src/layout/theme.liquid | 2 +- src/sections/cart.liquid | 3 +- src/sections/collection-template.liquid | 1 + src/sections/product-main-template.liquid | 1 + src/sections/product-template.liquid | 1 + src/snippets/bold-cart-item.liquid | 388 ++++++++++++++++++ src/snippets/bold-product.liquid | 453 ++++++++++++++++++++++ src/snippets/bold-variant.liquid | 294 ++++++++++++++ src/templates/search.liquid | 1 + 9 files changed, 1142 insertions(+), 2 deletions(-) create mode 100644 src/snippets/bold-cart-item.liquid create mode 100644 src/snippets/bold-product.liquid create mode 100644 src/snippets/bold-variant.liquid diff --git a/src/layout/theme.liquid b/src/layout/theme.liquid index 4beca40..78c78f7 100644 --- a/src/layout/theme.liquid +++ b/src/layout/theme.liquid @@ -38,7 +38,7 @@ {% include 'style-tags' %} {{ content_for_header }} {% include 'script-tags-head' %} - + {%- include 'bold-product' with product, hide_action: 'header' -%}
diff --git a/src/sections/cart.liquid b/src/sections/cart.liquid index c60f74d..06f62fe 100644 --- a/src/sections/cart.liquid +++ b/src/sections/cart.liquid @@ -35,6 +35,7 @@ Loop through products in the cart {% endcomment %} {% for item in cart.items %} + {% include 'bold-cart-item' with item %}
@@ -105,7 +106,7 @@ {{ 'cart.label.quantity' | t }}
- +
diff --git a/src/sections/collection-template.liquid b/src/sections/collection-template.liquid index f63eab5..61f3d2c 100644 --- a/src/sections/collection-template.liquid +++ b/src/sections/collection-template.liquid @@ -127,6 +127,7 @@
{% for product in collection.products %} + {% include 'bold-product' with product, hide_action: 'skip' %} {% include 'easylockdown_filter_collection' with product %} {% assign hover_class = section.settings.collection_style %} {% assign fit_image_class = 'grid__item--variable-height grid__image' %} diff --git a/src/sections/product-main-template.liquid b/src/sections/product-main-template.liquid index 8070a7f..72b84b2 100644 --- a/src/sections/product-main-template.liquid +++ b/src/sections/product-main-template.liquid @@ -7,6 +7,7 @@ - http://schema.org/docs/gs.html {% endcomment %} +{% include 'bold-product' with product, hide_action: 'break', output: 'none' %} {% assign on_sale = false %} {% if product.compare_at_price > product.price %} {% unless hide_on_sale_badge %} diff --git a/src/sections/product-template.liquid b/src/sections/product-template.liquid index 2ab446d..afd3a6a 100644 --- a/src/sections/product-template.liquid +++ b/src/sections/product-template.liquid @@ -7,6 +7,7 @@ - http://schema.org/docs/gs.html {% endcomment %} +{% include 'bold-product' with product, hide_action: 'break', output: 'none' %} {% assign on_sale = false %} {% if product.compare_at_price > product.price %} {% unless hide_on_sale_badge %} diff --git a/src/snippets/bold-cart-item.liquid b/src/snippets/bold-cart-item.liquid new file mode 100644 index 0000000..3c35657 --- /dev/null +++ b/src/snippets/bold-cart-item.liquid @@ -0,0 +1,388 @@ + + +{% comment %} Last updated 2018-May-14 {% endcomment %} +{% capture bold_cart_item_liquid %} +{% comment %} +BOLD-CART-ITEM.LIQUID - Universal Bold Cart Updater +This file creates liquid variables to assist in updating line items in cart.liquid. + +USED BY: Product Options, Recurring Orders, Product Builder +REQUIRES: bold.css + +To use this file: +* Include this file immediately after the start of the item loop in the cart. + Example: {% include 'bold-cart-item' with item %} + + +* Make the following replacements. + bold_item_price replaces item.price + bold_item_line_price replaces item.line_price + +* Follow the install instructions for your app to see where these variables need to be inserted + (See bold-cart.liquid for additional installation requirements) + + PRODUCT OPTIONS + {{ bold_row_class }} inserted Inside the class attribute of the first row after "for item in cart.items" + {{ bold_row_data }} inserted Inside the first row tag, outside of any other attributes + {{ bold_remove_class }} inserted Inside the class attribute of the remove button + {{ bold_remove_href }} replaces Relpaces the existing href attribute of the remove button + {{ bold_remove_attr }} inserted Inside the remove element's tag, outside of any other attributes + {{ bold_qty_class }} inserted Inside the class attribute of the quantity box + {{ bold_qty_attr }} inserted Inside the quantity box input tag, outside of any other attributes + {{ bold_item_properties }} inserted Placed where you want the selected options to display, usually shortly after the {{ item.title }} + {{ bold_qty_button_attr }} inserted Inside any +/- buttons on the cart.liquid page (if they exist) + + RECURRING ORDERS + {{ bold_remove_class }} inserted Inside the class attribute of the remove button + {{ bold_recurring_desc }} inserted Placed where you want the recurring orders description to appear, usually shortly after the {{ item.title }} + (See bold-cart.liquid for additional installation requirements) + + PRODUCT BUILDER + {{ bold_row_class }} inserted Inside the class attribute of the first row after "for item in cart.items" + {{ bold_row_data }} inserted Inside the first row tag, outside of any other attributes + {{ bold_remove_class }} inserted Inside the class attribute of the remove button + {{ bold_remove_href }} replaces Relpaces the existing href attribute of the remove button + {{ bold_remove_attr }} inserted Inside the remove element's tag, outside of any other attributes + {{ bold_qty_class }} inserted Inside the class attribute of the quantity box + {{ bold_qty_attr }} inserted Inside the quantity box input tag, outside of any other attributes + {{ bold_qty_button_attr }} inserted Inside any +/- buttons on the cart.liquid page (if they exist) + {{ bold_item_properties }} inserted Placed where you want the selected options to display, usually shortly after the {{ item.title }} + {{ bold_builder_img_src }} inserted Wrap the image tag with {% if bold_builder_img_src != blank %}{{ bold_builder_img_alt }}{% else %} {% endif %} + {{ bold_builder_img_alt }} inserted See bold_builder_image_src above + {{ bold_builder_href }} replaces item.url (Some themes use item.product.url or item.variant.url instead) + + BOLD D&H + {{ bold_qty_attr }} inserted Inside the quantity box input tag, outside of any other attributes + + BUY THE MEASURE + {{ bold_qty_class }} inserted Inside the class attribute of the quantity box + + QUANTITY BREAKS, CUSTOMER PRICING, PRODUCT BUNDLES + {{ bold_row_data }} inserted Inside the first row tag, outside of any other attributes + ** Inventory control also requires bold-variant-inventory.liquid and bold-base-variant.liquid + (See bold-cart.liquid for additional installation requirements) + +{% endcomment %} + +{% comment %} SET UP DEFAULTS BEFORE ANY APP INTERFERENCE {% endcomment %} + +{% assign bold_cart = bold_order | default: cart | default: checkout %} +{% assign bold_item_list = bold_cart.items | default: bold_cart.line_items %} + +{% assign bold_item = bold-cart-item %} +{% assign bold_item_price = bold_item.price %} +{% assign bold_item_quantity = bold_item.quantity %} + + +{% include 'bold-variant' with bold_item.variant, base_product: bold_item.product, line_item: bold_item %} +{% assign bold_item_price = bold_variant_price | default: bold_item_price %} + + +{% assign bold_hidden_item = false %} + +{% comment %} ATTRIBUTES FOR THE CART ROW {% endcomment %} +{% if bold_item.properties.builder_id != blank %} + {% assign builder_id = 'builder_id' %} + {% assign master_builder = 'master_builder' %} +{% else %} + {% assign builder_id = '_builder_id' %} + {% assign master_builder = '_master_builder' %} +{% endif %} +{% if bold_item.properties[master_builder] != blank %} + {% assign bold_row_class = 'bold-row bold-master bold-row-' | append: bold_item.properties[builder_id] %} + {% assign bold_row_data = 'data-bold-id="' | append: bold_item.properties[builder_id] | append: '"' %} +{% elsif bold_item.properties[builder_id] != blank %} + {% assign bold_row_class = 'bold-row bold-hidden bold-row-' | append: bold_item.properties[builder_id] %} + {% assign bold_row_data = 'data-bold-id="' | append: bold_item.properties[builder_id] | append: '"' %} + {% assign bold_hidden_item = true %} +{% else %} + {% assign bold_row_class = '' %} + {% assign bold_row_data = '' %} +{% endif %} + +{% comment %} ADDITIONAL DATA FOR THE CART ROW {% endcomment %} +{% capture bold_qty_check %}{% include 'bold-variant-inventory' %}{% endcapture %} +{% unless bold_qty_check contains 'Liquid error' %} + {% assign bold_row_data = bold_row_data | append: ' data-bold-inventory-policy=' | append: bold_variant_inventory_policy %} + {% assign bold_row_data = bold_row_data | append: ' data-bold-inventory-quantity=' | append: bold_variant_inventory_quantity %} + {% assign bold_row_data = bold_row_data | append: ' data-bold-base-variant=' | append: bold_variant_inventory_base_id %} +{% endunless %} + +{% comment %} CHECK FOR RATIO PROPERTIES {% endcomment %} +{% assign bold_ratio = 1 %} +{% if bold_item.properties._bold_ratio %} + {% assign bold_ratio = bold_ratio | times: bold_item.properties._bold_ratio %} +{% elsif bold_item.properties._btm_ratio %} + {% assign bold_ratio = bold_ratio | times: bold_item.properties._btm_ratio %} +{% endif %} +{% assign bold_row_data = bold_row_data | append: ' data-bold-ratio=' | append: bold_ratio %} + + +{% comment %} UNIT PRICE AND QUANTITY WITH BUY THE MEASURE {% endcomment %} +{% if bold_ratio != 1 %} + {% assign bold_item_quantity = bold_item_quantity | divided_by: bold_ratio %} + {% assign bold_item_price = bold_item.price | times: bold_ratio %} +{% endif %} + +{% comment %} TOTAL PRICE WITH PRICED OPTIONS {% endcomment %} +{% if bold_item.properties[master_builder] != blank %} + {% if bold_item.properties._extra_price %} + {% comment %} PRICE IS ATTACHED TO THE MASTER, NO NEED TO LOOP THROUGH CART {% endcomment %} + {% assign bold_item_price = bold_item.price %} + {% for bold_extra in bold_item.properties._extra_price %} + {% assign bold_item_price = bold_item_price | plus: bold_extra.last %} + {% endfor %} + {% else %} + {% comment %} OLD INSTALL, NEED TO LOOP THROUGH ENTIRE CART {% endcomment %} + {% assign bold_item_price = 0 %} + {% for po_item in bold_item_list %} + + {% if bold_item.properties[builder_id] == po_item.properties[builder_id] %} + + {% comment %} CHECK FOR RATIO PROPERTIES {% endcomment %} + {% assign po_ratio = 1 %} + {% if po_item.properties._bold_ratio %} + {% assign po_ratio = po_ratio | times: po_item.properties._bold_ratio %} + {% elsif po_item.properties._btm_ratio %} + {% assign po_ratio = po_ratio | times: po_item.properties._btm_ratio %} + {% endif %} + + {% assign bold_item_price = po_ratio | times: po_item.price | plus: bold_item_price %} + {% endif %} + {% endfor %} + {% endif %} +{% endif %} + +{% comment %} APPLY RECURRING ORDERS DISCOUNT, IF SET (ONLY FOR V2 RO) {% endcomment %} +{% if bold_item.properties._ro_discount_percentage %} + {% assign bold_ro_multiplier = 100.00 | minus: bold_item.properties._ro_discount_percentage | times: 0.01 %} + {% assign bold_original_price = bold_item_price %} + {% assign bold_item_price = bold_item_price | times: bold_ro_multiplier | round %} +{% endif %} + +{% comment %} SET LINE ITEM PRICE {% endcomment %} +{% assign bold_item_line_price = bold_item_price | times: bold_item_quantity %} + +{% comment %} HELPER VARIABLES FOR REMOVE BUTTON {% endcomment %} +{% if bold_item.properties[master_builder] != blank %} + {% assign bold_remove_href = '#' %} + {% assign bold_remove_attr = 'onclick="remove_product_builder(' | append: "'" | append: bold_item.properties[builder_id] | append: "'" | append: ');"' %} + {% assign bold_remove_class = bold_item.properties[builder_id] | append: '_remove bold-ro-remove' %} +{% else %} + {% assign bold_remove_href = '/cart/change?line=' | append: forloop.index | append: '&quantity=0' %} + {% assign bold_remove_attr = '' %} + {% assign bold_remove_class = 'bold-ro-remove' %} +{% endif %} + +{% comment %} HELPER VARIABLES FOR QUANTITY BOX {% endcomment %} +{% assign options_readonly = false %} +{% if bold_helper_loaded and bold_item.properties[builder_id] != blank %} + {% assign bold_qty_attr = 'onchange="Bold.updateQtyBoxes();"' %} + {% assign bold_qty_class = bold_item.properties[builder_id] | append: '_qty' %} +{% elsif bold_item.properties[builder_id] != blank %} + {% assign bold_qty_attr = 'onchange="update_qty_builder(' | append: "'" | append: bold_item.properties[builder_id] | append: "'" | append: ', this);"' %} + {% assign bold_qty_class = bold_item.properties[builder_id] | append: '_qty' %} + {% if bold_item.properties[master_builder] == blank %}{% assign options_readonly = true %}{% endif %} +{% else %} + {% assign bold_qty_attr = '' %} + {% assign bold_qty_class = '' %} +{% endif %} +{% if options_readonly or bold_item.product.metafields.inventory.ShappifyHidden == "true" or bold_item.variant.metafields.bold_measurement.formula %} + {% assign bold_qty_attr = bold_qty_attr | append: ' readonly="readonly"' %} +{% endif %} +{% if bold_item.variant.metafields.bold_measurement.formula %} + {% assign bold_qty_class = bold_qty_class | append: ' bold-btm-qty ' %} + {% assign bold_qty_name = '' %} + {% assign bold_qty_after = '' %} +{% else %} + {% assign bold_qty_name = 'updates[]' %} + {% assign bold_qty_after = '' %} +{% endif %} +{% if bold_variant_inventory_policy == 'deny' and bold_item_max_quantity != blank %} + {% assign bold_qty_attr = bold_qty_attr | append: ' max=' | append: bold_item_max_quantity %} +{% endif %} + +{% comment %} HELPER ATTRIBUTES FOR NON-AJAX +/- BUTTONS {% endcomment %} +{% assign bold_qty_button_attr = '' %} +{% assign bold_qty_readonly = false %} +{% if bold_item.properties[master_builder] != blank %} + {% assign bold_qty_button_attr = ' onclick="trigger_qty_update()" ' %} +{% endif %} +{% if bold_item.product.metafields.inventory.ShappifyHidden == "true" or bold_item.variant.metafields.bold_measurement.formula %} + {% assign bold_qty_button_attr = bold_qty_button_attr | append: ' disabled="disabled" '%} + {% assign bold_qty_readonly = true %} +{% endif %} + +{% comment %} GENERATE PROPERTIES DESCRIPTION {% endcomment %} +{% assign bold_builder_product = false %} +{% capture bold_item_properties %} + {% capture custom_properties_display_check %}{% include 'bold-item-properties' with bold_item %}{% endcapture %} + {% unless custom_properties_display_check contains 'Liquid error' %} + {{ custom_properties_display_check }} + {% else %} +
+ {% for p in bold_item.properties %} + {% assign underscore_hidden = false %} + {% assign first_char = p.first | slice: 0 %} + {% assign second_char = p.first | slice: 1 %} + {% if first_char == "_" and second_char != "_" %} + {% assign underscore_hidden = true %} + {% endif %} + + {% comment %} CHECK FOR ALL THE REASONS WE MIGHT HIDE THIS PROPERTY FROM THE DISPLAY {% endcomment %} + {% if p.first == 'total_recurrences' or p.first == "frequency_type_text" or p.first == "frequency_type" or p.first == "frequency_num" or p.first == "builder_id" or p.first == "builder_info" or p.first == "master_builder" or p.first == "group_id" or p.first == "discounted_price" or p.first == "is_prepaid" or underscore_hidden == true or p.last == blank %} + {% if p.first contains "builder_info" %} + {% assign bold_builder_product = true %} + {% if p.first == 'builder_info' %} + {% assign builder_info = 'builder_info' %} + {% else %} + {% assign builder_info = '_builder_info' %} + {% endif %} + {% endif %} + {% continue %} + {% endif %} + {% assign option_title = p.first %} +
{{ p.first | replace: '__', '' | replace: '&', '&' }}: + + {% comment %} DISPLAY UPLOAD LINKS AS LINKS, EVERYTHING ELSE AS TEXT{% endcomment %} + {% if p.last contains '/uploads/' %} + Uploaded File + {% else %} + {{ p.last | replace: '&', '&' | replace: '<', '<' | replace: '>', '>' }} + {% endif %} +
+ {% endfor %} +
+ {% if bold_item.properties[builder_id] != blank %} +
+ {% endif %} + {% endunless %} +{% endcapture %} + +{% comment %} GENERATE RECURRING ORDER VARIABLES FOR CUSTOM DISPLAY {% endcomment %} +{% assign bold_recurring_frequency_num = bold_item.properties.frequency_num %} +{% assign bold_recurring_frequency_text = bold_item.properties.frequency_type_text %} +{% assign bold_recurring_savings = bold_original_price | minus: bold_item_price %} + +{% comment %} GENERATE RECURRING ORDER DESCRIPTION {% endcomment %} +{% assign bold_is_recurring = false %} +{% capture bold_recurring_desc %} + {% if bold_item.properties.frequency_type and bold_item.properties.frequency_num and bold_item.properties.frequency_type_text %} + {% assign bold_is_recurring = true %} + {% capture custom_recurring_desc_check %}{% include 'bold-recurring-desc' with bold_item %}{% endcapture %} + {% unless custom_recurring_desc_check contains 'Liquid error' %} + {{ custom_recurring_desc_check }} + {% else %} + {% unless bold_item.properties._convertible_discount_percent%} +
+ Every + {{ bold_item.properties.frequency_num}} + {{ bold_item.properties.frequency_type_text }} + {% if bold_item.properties.discounted_price %}{{ bold_item_price | money }} each{% endif %} + {% if bold_item.properties._secondary_discount_percent %} + {% assign bold_ro_secondary_discount_multiplier = 100.00 | minus: bold_item.properties._secondary_discount_percent | times: 0.01 %} + {% assign bold_ro_secondary_discount_price = bold_item.price | times: bold_ro_secondary_discount_multiplier %} +
+ {% if bold_item.properties._secondary_discount_required_orders == '1' %} + {% if bold_ro_secondary_discount_price < bold_item.price %} + Discounted price + {% else %} + Price + {% endif %} + after first order + {{bold_ro_secondary_discount_price | money}} + {% else %} + {% if bold_ro_secondary_discount_price < bold_item.price %} + Discounted price + {% else %} + Price + {% endif %} + after + {{bold_item.properties._secondary_discount_required_orders}} + orders: + {{bold_ro_secondary_discount_price | money}} + {% endif %} + {% endif %} +
+ {% endunless %} + {% if bold_item.properties._convertible_discount_percent %} + {% assign bold_ro_convertible_multiplier = 100.00 | minus: bold_item.properties._convertible_discount_percent | times: 0.01 %} + {% assign bold_ro_convertible_product_price = all_products[bold_item.properties._convertible_product_handle].price %} + {% assign bold_ro_convertible_title = all_products[bold_item.properties._convertible_product_handle].title %} + {% assign bold_ro_convertible_variant_id = bold_item.properties._convertible_variant_id | times: 1 %} + {% for var in all_products[bold_item.properties._convertible_product_handle].variants %} + {% if var.id == bold_ro_convertible_variant_id %} + {% assign bold_ro_convertible_product_price = var.price %} + {% if var.title != 'Default Title' %} + {% assign bold_ro_convertible_title = bold_ro_convertible_title | append: ' - ' | append: var.title %} + {% endif %} + {% endif %} + {% endfor %} + {% assign bold_ro_convertible_discount_price = bold_ro_convertible_product_price | times: bold_ro_convertible_multiplier %} + Converts to: + {{bold_ro_convertible_title}} + {{ bold_ro_convertible_discount_price | money }} +
+ Deliver every + {{ bold_item.properties.frequency_num}} + {{ bold_item.properties.frequency_type_text }} +
+ {% endif%} + {% if bold_item.properties.total_recurrences %} + Your subscription will last for {{ bold_item.properties.total_recurrences }} shipments + {% endif %} + {% endunless %} + {% endif %} + + {% comment %} GENERATE HIDDEN INPUT FIELDS FOR RO PRODUCTS {% endcomment %} + {% if bold_item.properties.frequency_type and bold_item.properties.frequency_num and bold_item.properties.frequency_type_text %} + + + {% endif %} + + {% comment %} GENERATE REMAINING HIDDEN INPUT FIELDS FOR ALL ITEMS {% endcomment %} + + + +{% endcapture %} + +{% comment %} EXPOSE DATA FOR RO CONVERTIBLE ITEM {% endcomment %} +{% if bold_item.properties._convertible_product_handle != blank %} + +{% endif %} + +{% comment %} GENERATE BOLD DESCRIPTION {% endcomment %} +{% capture bold_desc %} + +{% endcapture %} + +{% comment %} GENERATE VARIABLES FOR BUILDER {% endcomment %} +{% if bold_builder_product %} + {% assign builder_info = bold_item.properties[builder_info] | split: '~~' %} + {% assign bold_builder_img_alt = builder_info[0] %} + {% assign bold_builder_img_src = builder_info[1] %} + {% assign bold_builder_href = '/apps/productbuilder/' | append: builder_info[2] %} +{% else %} + {% assign bold_builder_img_alt = false %} + {% assign bold_builder_img_src = false %} + {% assign bold_builder_href = bold_item.product.url %} +{% endif %} + +{% comment %} ALIASES FOR PRODUCT OPTIONS VARIABLES FOR QUICK-INSTALL {% endcomment %} +{% assign boldoptions_step3 = bold_row_class %} +{% assign boldoptions_step4 = bold_row_data %} +{% assign boldoptions_step6 = bold_item_properties %} +{% assign boldoptions_step7 = bold_qty_class %} +{% assign boldoptions_step8 = bold_qty_attr %} +{% assign boldoptions_step9 = bold_remove_href %} +{% assign boldoptions_step10 = bold_remove_class %} +{% assign boldoptions_step11 = bold_remove_attr %} +{% assign boldoptions_step12 = bold_item_price | money %} +{% assign boldoptions_step13 = bold_item_line_price | money %} + +{% endcapture %}{{ bold_cart_item_liquid | strip_newlines }} diff --git a/src/snippets/bold-product.liquid b/src/snippets/bold-product.liquid new file mode 100644 index 0000000..a663213 --- /dev/null +++ b/src/snippets/bold-product.liquid @@ -0,0 +1,453 @@ + +{%- comment -%} +BOLD-PRODUCT.LIQUID +Last updated: 2017-October-26 + +Sets all the appropriate liquid variables for Bold Apps that affect the product. +Creates an updated JSON object that takes all appropriate apps into account. Can mimic all three types of product objects that Shopify uses. +When installing, use {%- include 'bold-product', output: 'json' -%} to replace {{ product | json }} in the theme's liquid code. +Alternatively, use {%- include 'bold-product', output: 'json', escape: true -%} to replace {{ product | json | escape }} in the theme's liquid code. + +FLAGS: + output: 'none' | 'default' | 'script' | 'json' Controls how much data is printed + endpoint: 'js' | 'json' | false (default) Prints 'layout none' to create an AJAX endpoint. Resulting object will be formatted to match either the '.js' or '.json' style of output. If set to a truth-y value other than 'json' will act like a '.js' endpoint. + hide_action: 'header' | 'error' | 'break' | 'skip' | 'none' (default) Determines what happens if the product is hidden + sort_by: {string} | null (default) If set, attempts to sort variants by the provided field + sort_order: 'desc' | 'asc' (default) If set to 'desc' (descending), reverses the variant sort + customer_tag: {string} | null (default) If set, forces bold-product to calculate as though the customer had the specified tag + quick_price: true | false (default) If true, uses the metafields set by the CSP/QB apps to get the prices. Output must be 'none' to be allowed + additional_includes: {string} | null (default) If set, includes the additional products after setting the initial bold_product liquid variables + variant_includes: {string} | null (default) Additional include files to be passed on to bold-variant (comma-delimited) + escape: {bool} | false (default) If set, forces bold-product to escape its json output + +REQUIRED: bold-variant.liquid is needed for full product handling. + +OPTIONAL: bold-product-error.liquid - If this snippet exists, it will be used to display content other than 'Product not available' + to the customer if the hide_action is either 'break' or 'error'. + A bold-product-error snippet can access: + product: The liquid variable representing the product that is hidden + reason: Why the product is hidden. Possible values are: + 'customer-hide-tag' | 'motivator-hidden-product' | 'options-hidden-product' | 'duplicate-and-hide' | 'other' +{%- endcomment -%} + +{%- comment -%} +============================================================================================================ + ASSIGN LIQUID VARIABLES +============================================================================================================ +{%- endcomment -%} + +{%- comment -%}Assign flags to their default values if not set {%- endcomment -%} +{%- assign escape_output = escape | default: false -%} +{%- assign bold_product = bold-product | default: product -%} +{%- assign bold_product_output = output | default: 'default' -%} +{%- assign bold_product_endpoint = endpoint | default: false -%} +{%- if bold_product_endpoint -%}{%- assign bold_product_output = 'json' -%}{%- endif -%} + +{%- assign bold_product_hide_action = hide_action | default: 'none' -%} +{%- assign bold_product_sort_by = sort_by | default: nil -%} +{%- assign bold_product_sort_order = sort_order | default: 'asc' -%} + +{%- assign csp_customer_tag = 'default' -%} +{%- if customer.tags and shop.metafields.shop_csp_tag_group.shop_csp_tag -%} +{%- assign all_shop_tags = shop.metafields.shop_csp_tag_group.shop_csp_tag | append: ',default' | split: ',' -%} + {%- for customer_tag in customer.tags -%} + {%- if all_shop_tags contains customer_tag -%} + {%- assign csp_customer_tag = customer_tag -%} + {%- endif -%} + {%- endfor -%} +{%- endif -%} +{%- assign bold_product_customer_tag = customer_tag | default: csp_customer_tag | default: 'default' -%} + +{%- assign bold_product_quick_price = quick_price | default: false -%} + +{%- if bold_product_hide_action == 'skip' and output == blank -%} + {%- assign bold_product_output = 'none' -%} + {%- assign product_metafield_check = bold_product.variants | map: 'metafields' | map: 'shappify_csp' | map: 'csp_tag' | uniq -%} + {%- if product_metafield_check.size > 1 or product_metafield_check.first != blank -%} + {%- assign has_csp = true -%} + {%- else -%} + {%- assign has_csp = false -%} + {%- endif -%} + {%- if quick_price == blank and shop.metafields.shop_csp_tag_group.shop_csp_tag and has_csp -%} + {%- assign bold_product_quick_price = true -%} + {%- endif -%} +{%- endif -%} + +{%- if bold_product_output == 'json' and bold_product_endpoint -%}{%- layout none -%}{%- endif -%} + + +{%- assign variant_list = bold_product.variants -%} +{%- if bold_product_sort_by != blank -%}{%- assign variant_list = variant_list | sort: bold_product_sort_by -%}{%- endif -%} +{%- if bold_product_sort_order == 'desc' or bold_product_sort_order == 'descending' -%}{%- assign variant_list = variant_list | reverse -%}{%- endif -%} +{%- assign variant_list = variant_list | default: bold_product.variants -%} + +{%- if bold_product_output == 'json' -%} + {%- assign requires_variant_loop = true -%} +{%- elsif bold_product_quick_price and bold_product_output == 'none' -%} + {%- assign requires_variant_loop = false -%} +{%- else -%} + {%- assign requires_variant_loop = bold_product.metafields.shappify_bundle | default: bold_product.metafields.shappify_csp | default: bold_product.metafields.shappify_qb | default: shop.metafields.shop_csp_tag_group | default: shop.metafields.bold_measurement | default: shop.metafields.bold_rp | default: false -%} +{%- endif -%} + +{%- capture bold_bundles_widget -%} +
+{%- endcapture -%} + +{%- assign product_has_btm = false -%} +{%- assign product_has_csp = false -%} +{%- assign product_has_qb = false -%} +{%- assign product_has_ro = false -%} +{%- assign product_has_bdl = false -%} + +{%- assign bold_hidden_product = false -%} +{%- assign bold_trigger_break = false -%} + +{%- if requires_variant_loop -%} + {%- comment -%}INTIALIZE VARIABLES, CLEAR OLD VALUES {%- endcomment -%} + {%- assign bold_price_min = 1000000000000000000 -%} {%- comment -%}Starting the count at Shopify's max allowed value {%- endcomment -%} + {%- assign bold_price_max = 0 -%} + {%- assign bold_price = bold_price_min -%} + {%- assign bold_price_varies = false -%} + + {%- assign bold_compare_at_price_min = 1000000000000000000 -%} {%- comment -%}Starting the count at Shopify's max allowed value {%- endcomment -%} + {%- assign bold_compare_at_price_max = 0 -%} + {%- assign bold_compare_at_price = bold_compare_at_price_min -%} + {%- assign bold_compare_at_price_varies = false -%} + + {%- assign bold_selected_or_first_available_variant = "" -%} + {%- assign bold_variants_size = 0 -%} + + {%- assign options1 = nil -%} + {%- assign options2 = nil -%} + {%- assign options3 = nil -%} + + {%- assign bold_product_available = false -%} + + {%- comment -%}SET LIQUID PRODUCT VARIABLES DERIVED FROM VARIANT VALUES {%- endcomment -%} + + {%- assign variant_output_json = '' -%} + {%- for variant in variant_list -%} + {%- capture bold_variant_check -%} + {%- include 'bold-variant' with variant, output: 'json', hide_action: 'skip', base_product: bold_product, customer_tag: bold_product_customer_tag, price_style: bold_product_endpoint -%} + {%- endcapture -%} + + {%- unless bold_product_output == 'none' -%} + {%- if bold_variant_check contains 'Liquid error' -%} + {%- assign variant_output_json = variant_list | json -%} + {%- break -%} + {%- endif -%} + + {%- if variant_output_json.size > 1 -%}{%- assign variant_output_json = variant_output_json | append: ',' -%}{%- endif -%} + {%- assign variant_output_json = variant_output_json | append: bold_variant_check -%} + {%- endunless -%} + + {%- if bold_variant_price < bold_price_min -%}{%- assign bold_price_min = bold_variant_price -%}{%- endif -%} + {%- if bold_variant_price > bold_price_max -%}{%- assign bold_price_max = bold_variant_price -%}{%- endif -%} + {%- if bold_price_max != bold_price_min -%}{%- assign bold_price_varies = true -%}{%- endif -%} + {%- assign bold_price = bold_price_min -%} + + {%- if variant.compare_at_price < bold_compare_at_price_min -%}{%- assign bold_compare_at_price_min = variant.compare_at_price -%}{%- endif -%} + {%- if variant.compare_at_price > bold_compare_at_price_max -%}{%- assign bold_compare_at_price_max = variant.compare_at_price -%}{%- endif -%} + {%- if bold_compare_at_price_max != bold_compare_at_price_min -%}{%- assign bold_compare_at_price_varies = true -%}{%- endif -%} + {%- assign bold_compare_at_price = bold_compare_at_price_min -%} + + {%- if variant.id == bold_product.selected_or_first_available_variant.id -%}{%- assign bold_selected_or_first_available_variant = variant -%}{%- endif -%} + {%- if bold_selected_or_first_available_variant == "" -%}{%- assign bold_selected_or_first_available_variant = variant -%}{%- endif -%} + {%- if bold_selected_or_first_available_variant.available == false and variant.available == true -%}{%- assign bold_selected_or_first_available_variant = variant -%}{%- endif -%} + {%- assign bold_variants_size = bold_variants_size | plus: 1 -%} + + {%- unless options1 contains option1_clean_name or option1_clean_name == blank -%} + {%- unless options1 == blank -%}{%- assign options1 = options1 | join: '~~' | append: '~~' -%}{%- endunless -%} + {%- assign options1 = options1 | append: option1_clean_name | split: '~~' -%} + {%- endunless -%} + + {%- unless options2 contains option2_clean_name or option2_clean_name == blank -%} + {%- unless options2 == blank -%}{%- assign options2 = options2 | join: '~~' | append: '~~' -%}{%- endunless -%} + {%- assign options2 = options2 | append: option2_clean_name | split: '~~' -%} + {%- endunless -%} + + {%- unless options3 contains option3_clean_name or option3_clean_name == blank -%} + {%- unless options3 == blank -%}{%- assign options3 = options3 | join: '~~' | append: '~~' -%}{%- endunless -%} + {%- assign options3 = options3 | append: option3_clean_name | split: '~~' -%} + {%- endunless -%} + + {%- assign bold_product_available = bold_product_available | default: bold_variant_available -%} + {%- assign product_has_btm = variant_has_btm | default: product_has_btm -%} + {%- assign product_has_csp = variant_has_csp | default: product_has_csp -%} + {%- assign product_has_qb = variant_has_qb | default: product_has_qb -%} + {%- assign product_has_ro = variant_has_ro | default: product_has_ro -%} + {%- assign product_has_bdl = variant_has_bdl | default: product_has_bdl -%} + + {%- endfor -%} + + {%- if variant_output_json.first != '[' -%} + {%- assign variant_output_json = '[' | append: variant_output_json | append: ']' -%} + {%- endif -%} + + {%- comment -%}Failsafe: This will set all the Bold prices to "NaN" (Not A Number) in the unexpected case where all variants are supposed to be hidden from the customer {%- endcomment -%} + {%- if bold_variants_size == 0 -%}{%- assign bold_price_min = "NaN" -%}{%- assign bold_price_max = "NaN" -%}{%- assign bold_price = "NaN" -%}{%- assign bold_compare_at_price_min = "NaN" -%}{%- assign bold_compare_at_price_max = "NaN" -%}{%- assign bold_compare_at_price = "NaN" -%}{%- endif -%} + + {%- comment -%}Failsafe: This will set all the Bold compare_at prices to the default compare_at_prices when 'compare_at' is not found {%- endcomment -%} + {%- if bold_compare_at_price_min > bold_compare_at_price_max -%}{%- assign bold_compare_at_price_min = bold_product.compare_at_price_min -%}{%- assign bold_compare_at_price_max = bold_product.compare_at_price_max -%}{%- assign bold_compare_at_price = bold_product.compare_at_price -%}{%- endif -%} + + {%- comment -%}Failsafe: If no valid variants exist, fail back to product.selected_or_first_available_variant after all {%- endcomment -%} + {%- if bold_selected_or_first_available_variant == "" -%}{%- assign bold_selected_or_first_available_variant = product.selected_or_first_available_variant -%}{%- endif -%} + +{%- else -%} + + {%- if bold_product_quick_price -%} + {%- assign money_prefix = shop.money_format | split: '{{' | first -%} + {%- assign money_suffix = shop.money_format | split: '}}' | last -%} + {%- assign high_tag = bold_product_customer_tag | append: '_price_high' -%} + {%- assign bold_price_min = bold_product.metafields.shappify_csp[bold_product_customer_tag] | default: bold_product.metafields.shappify_qb.qb_min | default: bold_product.price | remove: money_prefix | remove: money_suffix | remove: '.' | remove: ',' | remove: ' ' | times: 1 -%} + {%- assign bold_price_max = bold_product.metafields.shappify_csp[high_tag] | default: bold_product.price_max | remove: money_prefix | remove: money_suffix | remove: '.' | remove: ',' | remove: ' ' | times: 1 -%} + {%- assign bold_price = bold_price_min -%} + {%- if bold_price_max == bold_price_min -%} + {%- assign bold_price_varies = false -%} + {%- else -%} + {%- assign bold_price_varies = true -%} + {%- endif -%} + {%- else -%} + {%- assign bold_price_min = bold_product.price_min -%} + {%- assign bold_price_max = bold_product.price_max -%} + {%- assign bold_price = bold_product.price -%} + {%- assign bold_price_varies = bold_product.price_varies -%} + {%- endif -%} + + + {%- assign bold_compare_at_price_min = bold_product.compare_at_price_min -%} + {%- assign bold_compare_at_price_max = bold_product.compare_at_price_max -%} + {%- assign bold_compare_at_price = bold_product.compare_at_price -%} + {%- assign bold_compare_at_price_varies = bold_product.compare_at_price_varies -%} + + {%- assign bold_selected_or_first_available_variant = bold_product.selected_or_first_available_variant -%} + {%- assign bold_variants_size = bold_product.variants.size -%} + + {%- assign options1 = bold_product.options[0].values -%} + {%- assign options2 = bold_product.options[1].values -%} + {%- assign options3 = bold_product.options[2].values -%} + + {%- assign bold_product_available = false -%} + {%- assign variant_output_json = variant_list | json -%} +{%- endif -%} + +{%- if bold_product_endpoint == 'json' -%} + {%- assign cents = bold_price | modulo: 100 | prepend: '00' | slice: -2, 2 -%} + {%- assign dollars = bold_price | times: 0.01 | floor -%} + {%- assign bold_price = dollars | append: '.' | append: cents -%} + + {%- assign cents = bold_price_min | modulo: 100 | prepend: '00' | slice: -2, 2 -%} + {%- assign dollars = bold_price_min | times: 0.01 | floor -%} + {%- assign bold_price_min = dollars | append: '.' | append: cents -%} + + {%- assign cents = bold_price_max | modulo: 100 | prepend: '00' | slice: -2, 2 -%} + {%- assign dollars = bold_price_max | times: 0.01 | floor -%} + {%- assign bold_price_max = dollars | append: '.' | append: cents -%} + + {%- assign cents = bold_compare_at_price | modulo: 100 | prepend: '00' | slice: -2, 2 -%} + {%- assign dollars = bold_compare_at_price | times: 0.01 | floor -%} + {%- assign bold_compare_at_price = dollars | append: '.' | append: cents -%} + + {%- assign cents = bold_compare_at_price_min | modulo: 100 | prepend: '00' | slice: -2, 2 -%} + {%- assign dollars = bold_compare_at_price_min | times: 0.01 | floor -%} + {%- assign bold_compare_at_price_min = dollars | append: '.' | append: cents -%} + + {%- assign cents = bold_compare_at_price_max | modulo: 100 | prepend: '00' | slice: -2, 2 -%} + {%- assign dollars = bold_compare_at_price_max | times: 0.01 | floor -%} + {%- assign bold_compare_at_price_max = dollars | append: '.' | append: cents -%} +{%- endif -%} + +{%- comment -%} +============================================================================================================ + HANDLE HIDDEN PRODUCTS +============================================================================================================ +{%- endcomment -%} + +{%- comment -%}CHECK FOR CSP VISIBILITY {%- endcomment -%} +{%- assign csp_hide_tag = false -%} +{%- assign hide_check = bold_product_customer_tag | append: '-HIDE' -%} +{%- if bold_product.tags contains hide_check -%}{%- assign csp_hide_tag = true -%}{%- endif -%} +{%- comment -%}END OF CSP CHECK {%- endcomment -%} + +{%- unless bold_product.id == blank -%} + {%- if csp_hide_tag == true or bold_product.type == 'OPTIONS_HIDDEN_PRODUCT' or bold_product.type == 'MOTIVATOR_HIDDEN_PRODUCT' or bold_product.metafields.inventory.ShappifyHidden == "true" -%} + {%- assign bold_hidden_product = true -%} + + {%- comment -%}What is the reason for the hidden product? {%- endcomment -%} + {%- if csp_hide_tag == true -%} {%- assign reason = 'customer-hide-tag' -%} + {%- elsif bold_product.type == 'MOTIVATOR_HIDDEN_PRODUCT' -%} {%- assign reason = 'motivator-hidden-product' -%} + {%- elsif bold_product.type == 'OPTIONS_HIDDEN_PRODUCT' -%} {%- assign reason = 'options-hidden-product' -%} + {%- elsif bold_product.metafields.inventory.ShappifyHidden == "true" -%} {%- assign reason = 'duplicate-and-hide' -%} + {%- else -%} {%- assign reason = 'other' -%} + {%- endif -%} + + {%- capture hidden_product_output -%} + {%- case bold_product_hide_action -%} + {%- when 'break' -%} + {%- capture error_page_check -%}{%- include 'bold-product-error' with reason, product: bold_product -%}{%- endcapture -%} + {%- unless error_page_check contains 'Liquid error' -%} + {{- error_page_check -}} + {%- else -%} +

Product is not available

+ {%- endunless -%} + {%- assign bold_trigger_break = true -%} + + {%- when 'error' -%} + {%- include 'bold-product-error' with reason, product: bold_product -%} + {%- assign bold_trigger_break = true -%} + + {%- when 'skip' -%} + {%- continue -%} + + {%- when 'header' -%} + {%- if template == 'product' -%}{%- endif -%} + {%- endcase -%} + {%- endcapture%} + {%- endif -%} +{%- endunless -%} + +{%- comment -%} +============================================================================================================ + MIN/MAX QUANTITY +============================================================================================================ +{%- endcomment -%} + +{%- assign bold_product_min = false -%} +{%- assign bold_product_max = false -%} +{%- for tag in bold_product.tags -%} + {%- assign lowercase_tag = tag | downcase | replace: 'min ', 'min_' | replace: 'min-', 'min_' | replace: 'max ', 'max_' | replace: 'max-', 'max_' -%} + {%- assign lowercase_customer_tag = bold_product_customer_tag | downcase -%} + {%- if lowercase_tag contains 'min_' -%} + {%- assign tag_info = lowercase_tag | split: 'min_' -%} + {% assign cust_tag = tag_info.first | strip %} + {%- if tag_info.first == blank or cust_tag == lowercase_customer_tag -%} + {%- assign bold_product_min = tag_info | last | times: 1 %} + {%- endif -%} + {%- elsif lowercase_tag contains 'max_' -%} + {%- assign tag_info = lowercase_tag | split: 'max_' -%} + {% assign cust_tag = tag_info.first | strip %} + {%- if tag_info.first == blank or cust_tag == lowercase_customer_tag -%} + {%- assign bold_product_max = tag_info | last | times: 1 %} + {%- endif -%} + {%- endif -%} +{%- endfor -%} + +{%- comment -%} +============================================================================================================ + BEGIN JSON OUTPUT +============================================================================================================ +{%- endcomment -%} + +{%- unless bold_product_output == 'none' -%} + {%- unless bold_product_output == 'script' or bold_product_output == 'json' -%} + {%- if product_has_qb -%} + {%- for var in bold_product.variants -%} + + {%- endfor -%} + {%- endif -%} + + {%- endunless -%} + {%- if bold_hidden_product -%} + {{- hidden_product_output -}} + {%- endif -%} +{%- endunless -%} +{%- if bold_trigger_break -%} + {%- break -%} +{%- endif -%} diff --git a/src/snippets/bold-variant.liquid b/src/snippets/bold-variant.liquid new file mode 100644 index 0000000..b10a215 --- /dev/null +++ b/src/snippets/bold-variant.liquid @@ -0,0 +1,294 @@ + +{%- comment -%} +BOLD-VARIANT.LIQUID +Last updated: 2017-October-26 + +Sets all appropriate liquid varaibles for Bold Apps that affect the variant. +Creates an updated JSON object that includes key information relating to our apps. +Combines the functionality of bold-hidden-variants, bold-base-variant and bold-variant-inventory + +FLAGS: + base_product: {product object} Base product object for the variant, used to check/set several properties. If not supplied, defaults to bold_product. If no bold_product is set, defaults to product + line_item: {line item object} | null (default) If set, pass the line item to the included snippets - some apps may adjust prices differently depending on whether we're influencing the cart total or not + output: 'json' | 'none' (default) Controls whether anything is printed to the DOM + hide_action: 'skip' | 'none' (default) Forces a 'continue' to skip hidden variants when 'skip' is set + customer_tag: {string} | null (default) If set, forces bold-variant to calculate as though the customer had the specified tag + price_style: 'json' | null (default) If set, sets prices as '10.00' instead of 1000 + custom_app_list: {string} | null (default) List of apps to apply to the price. Associated snippets will be automatically included. If not specified, will check for a shop metafield to get a list of all relevant apps that need to be included. + third_party_check: false | true (default) If true, runs additional checks that we know about to be compatible with third-party apps + addional_includes: {string} | null (default) Additional snippets that need to be included after the initial liquid variable assignments (comma-delimited) + +{%- endcomment -%} + +{%- comment -%} +============================================================================================================ + ASSIGN LIQUID VARIABLES +============================================================================================================ +{%- endcomment -%} + + +{%- comment -%} Assign flags to their default values if not set {%- endcomment -%} + +{%- assign bold_variant = bold-variant | default: variant -%} +{%- assign bold_variant_line_item = line_item | default: false -%} +{%- assign bold_variant_base_product = base_product | default: bold_product | default: bold_variant_line_item.product | default: product | default: item.product | default: item -%} +{%- assign bold_variant_output = output | default: 'none' -%} +{%- assign bold_variant_hide_action = hide_action | default: 'none' -%} +{%- assign bold_variant_customer_tag = customer_tag | default: csp_customer_tag -%} + +{%- assign app_list = '' -%} +{%- if app_list != blank and custom_app_list != blank -%} + {%- assign bold_variant_app_list = app_list | append: ',' | append: custom_app_list -%} +{%- else -%} + {%- assign bold_variant_app_list = app_list | default: custom_app_list | default: false -%} +{%- endif -%} + +{%- assign bold_variant_price = bold_variant.price -%} + +{%- if bold_variant_app_list -%} + + {%- assign bold_variant_app_list = bold_variant_app_list | split: ',' -%} + {%- for app in bold_variant_app_list -%} + {%- assign snippet_title = 'bold-' | append: app | append: '-variant' -%} + {%- capture silence_output -%} + {%- include snippet_title with bold_variant, base_product: bold_variant_base_product, line_item: bold_variant_line_item, customer_tag: bold_variant_customer_tag -%} + {%- endcapture -%} + {%- endfor -%} + +{%- endif -%} + + +{%- comment -%} Find the base variant and base variant's inventory {%- endcomment -%} + +{%- assign bold_base_variant_id = bold_variant.metafields.shappify_csp['csp_base'] | default: bold_variant.metafields.shappify_qb['qb_parent'] | default: bold_variant.metafields.shappify_bundle['bundle_parent'] | default: bold_variant.id -%} + +{%- comment -%} Make sure we can find the indicated base variant! {%- endcomment -%} +{%- assign bold_is_base_variant = true -%} +{%- assign bold_base_variant = bold_variant -%} +{%- unless bold_base_variant_id == bold_variant.id -%} + {%- for variant_check in bold_variant_base_product.variants -%} + {%- if variant_check.id == bold_base_variant_id -%} + {%- assign bold_base_variant = variant_check -%} + {%- assign bold_is_base_variant = false -%} + {%- break -%} + {%- endif -%} + {%- endfor -%} +{%- endunless -%} + +{%- comment -%} Assign inventory variables (based on the base_variant, if different from the current variant) {%- endcomment -%} +{%- assign target_variant_inventory_quantity = bold_base_variant.inventory_quantity -%} +{%- assign target_variant_inventory_policy = bold_base_variant.inventory_policy -%} + +{%- assign bold_variant_cart_quantity = 0 -%} +{%- for inv_check_item in cart.items -%} + {%- assign cart_variant = inv_check_item.variant -%} + {%- assign cart_base_variant_id = cart_variant.metafields.shappify_csp['csp_base'] | default: cart_variant.metafields.shappify_qb['qb_parent'] | default: cart_variant.metafields.shappify_bundle['bundle_parent'] | default: cart_variant.id -%} + {%- if cart_base_variant_id == bold_base_variant_id -%} + {%- assign bold_variant_cart_quantity = bold_variant_cart_quantity | plus: inv_check_item.quantity -%} + {%- endif -%} +{%- endfor -%} + +{%- assign bold_variant_inventory_quantity = bold_base_variant.inventory_quantity -%} +{%- assign bold_variant_remaining_quantity = bold_variant_inventory_quantity | minus: bold_variant_cart_quantity -%} +{%- assign bold_variant_inventory_policy = bold_base_variant.inventory_policy -%} +{%- assign bold_variant_inventory_management = bold_base_variant.inventory_management -%} + +{%- comment -%} Now that we've established quantity, re-evaluate the variant's availablility {%- endcomment -%} +{%- if bold_variant_remaining_quantity <= 0 and bold_variant_inventory_policy == 'deny' and bold_variant_inventory_management != blank -%} + {%- assign bold_variant_available = false -%} +{%- else -%} + {%- assign bold_variant_available = bold_variant.available -%} +{%- endif -%} + + +{%- comment -%} If we're calling this from bold-cart-item, also set the max quantity the line item can go up to {%- endcomment -%} +{%- if bold_item and bold_variant_inventory_management != blank and bold_variant_inventory_policy == 'deny' -%} + {%- assign bold_item_max_quantity = bold_item.quantity | plus: bold_variant_remaining_quantity -%} +{%- else -%} + {%- assign bold_item_max_quantity = '' -%} +{%- endif -%} + +{%- comment -%} Check for CSP visibility. Other 'hide' rules are based directly on metafields on the variants. {%- endcomment -%} + +{%- assign csp_hidden = false -%} +{%- if shop.metafields.shop_csp_tag_group.shop_csp_tag or bold_variant.metafields.shappify_csp -%} + {%- assign csp_flag_string = ' (' | append: bold_variant_customer_tag | append: ')' -%} + {%- assign all_shop_tags = shop.metafields.shop_csp_tag_group.shop_csp_tag | append: ',default' | split: ',' -%} + + {%- unless bold_variant.metafields.shappify_csp.csp_tag == blank -%} + + {%- if bold_variant.metafields.shappify_csp.csp_tag == 'default' and bold_variant_customer_tag != 'default' -%} + {%- if bold_variant_base_product -%} + {%- assign found_csp_level = false -%} + {%- for variant in bold_variant_base_product.variants -%} + {%- if variant.metafields.shappify_csp.csp_base == bold_variant.id and variant.metafields.shappify_csp.csp_tag == bold_variant_customer_tag -%} + {%- assign found_csp_level = true -%} + {%- break -%} + {%- endif -%} + {%- endfor -%} + {%- if found_csp_level -%}{%- assign csp_hidden = true -%}{%- endif -%} + {%- endif -%} + + + {%- elsif bold_variant_customer_tag != bold_variant.metafields.shappify_csp.csp_tag -%} + {%- assign csp_hidden = true -%} + {%- endif -%} + {%- assign bold_variant_title = bold_variant.title | remove: csp_flag_string -%} + {%- endunless -%} +{%- endif -%} + +{%- comment -%} Check for QB level, hide variant and update title as appropriate {%- endcomment -%} +{%- assign qb_hidden = false -%} +{%- assign qb_level = bold_variant.metafields.shappify_qb.qb_qty | default: bold_variant.metafields.shappify_csp.csp_qty | times: 1 -%} +{%- if qb_level > 1 -%}{%- assign qb_hidden = true -%}{%- endif -%} +{%- if bold_variant.title == '1+' -%} + {%- assign bold_variant_title = 'Default title' -%} +{%- endif -%} + +{%- comment -%} If required, check for third-party Hide Rules as well {%- endcomment -%} + +{%- if third_party_check == blank -%}{%- assign third_party_check = true -%}{%- endif -%} +{%- assign third_party_hidden = false -%} +{%- if third_party_check -%} + {%- if bold_variant.title contains '% Off' or bold_variant.metafields.brodev_scn.hide == "true" or bold_variant.metafields.secomapp.freegifts or bold_variant.title contains '(Bundle price)' -%}{%- assign third_party_hidden = true%}{%- endif -%} +{%- endif -%} + +{%- if csp_hidden or qb_hidden or third_party_hidden or bold_variant.metafields.shappify_bundle.is_bundle == 'true' or third_party_hidden -%} + {%- assign bold_hidden_variant = true -%} +{%- else -%} + {%- assign bold_hidden_variant = false -%} +{%- endif -%} + +{%- assign option1_clean_name = variant.option1 | remove: csp_flag_string -%} +{%- assign option2_clean_name = variant.option2 | remove: csp_flag_string -%} +{%- assign option3_clean_name = variant.option3 | remove: csp_flag_string -%} + +{%- comment -%} Check for presence of our apps {%- endcomment -%} +{%- if bold_variant.metafields.bold_measurement.formula -%}{%- assign variant_has_btm = true -%}{%- else -%}{%- assign variant_has_btm = false -%}{%- endif -%} +{%- if bold_variant.metafields.shappify_csp.csp_tag -%}{%- assign variant_has_csp = true -%}{%- else -%}{%- assign variant_has_csp = false -%}{%- endif -%} +{%- if bold_variant.metafields.shappify_qb.pricing_html or bold_variant.metafields.shappify_csp.pricing_html -%}{%- assign variant_has_qb = true -%}{%- else -%}{%- assign variant_has_qb = false -%}{%- endif -%} +{%- if bold_variant.metafields.bold_rp.rp_group_id -%}{%- assign variant_has_ro = true -%}{%- else -%}{%- assign variant_has_ro = false -%}{%- endif -%} +{%- assign bdl_check = base_product.variants | map: 'metafields' | map: 'shappify_bundle' | map: 'bundle_parent' -%} +{%- if bdl_check contains bold_variant.id -%}{%- assign variant_has_bdl = true -%}{%- else -%}{%- assign variant_has_bdl = false -%}{%- endif -%} + + +{%- if bold_variant_hide_action == 'skip' and bold_hidden_variant -%}{%- continue -%}{%- endif -%} + +{%- if bold_variant_output == 'json' -%} +{%- comment -%} +============================================================================================================ + BEGIN JSON OUTPUT +============================================================================================================ +{%- endcomment -%} +{ +"id":{{- bold_variant.id | json -}}, +"product_id":{{- bold_variant_base_product.id | json -}}, +"product_handle":{{- bold_variant_base_product.handle | json -}}, +"title":{{- bold_variant_title | default: bold_variant.title | json -}}, +"option1":{%- unless option1_clean_name == blank -%}{{- option1_clean_name | json -}}{%- else -%}null{%- endunless -%}, +"option2":{%- unless option2_clean_name == blank -%}{{- option2_clean_name | json -}}{%- else -%}null{%- endunless -%}, +"option3":{%- unless option3_clean_name == blank -%}{{- option3_clean_name | json -}}{%- else -%}null{%- endunless -%}, +"sku":{{- bold_variant.sku | json -}}, +"requires_shipping":{{- bold_variant.requires_shipping | json -}}, +"taxable":{{- bold_variant.taxable | json -}}, +"featured_image":{%- if bold_variant.featured_image == blank -%} +null, +{%- else -%} +{ +"created_at":{%- capture created_at -%}{{- bold_variant.featured_image.created_at -}}T{{- bold_variant.featured_image.created_at | date: "%T" -}}{%- endcapture -%}{{- shop.timezone -}}{{- created_at | json -}}, +"id":{{- bold_variant.featured_image.id | json -}}, +"position":{{- bold_variant.featured_image.position | json -}}, +"product_id":{{- bold_variant.featured_image.product_id | json -}}, +"src":{{- bold_variant.featured_image.src | json -}}, +"updated_at":{%- capture updated_at -%}{{- bold_variant.featured_image.updated_at | date: "%F" -}}T{{- bold_variant.featured_image.updated_at | date: "%T" -}}{%- endcapture -%}{{- shop.timezone -}}{{- updated_at | json -}} +}, +{%- endif -%} +"image_id":{{variant.featured_image.id | json -}}, +"available":{{- bold_variant_available | json -}}, +"name":{{- bold_variant_base_product.title | append: " - " | append: bold_variant.title | remove: csp_flag_string | json -}}, +"options":{{- bold_variant.options | json | remove: csp_flag_string -}}, +"price":{%- unless price_style == 'json' -%}{{- bold_variant_price | default: bold_variant.price | json -}}{%- else -%}{%- assign cents = bold_variant_price | default: bold_variant.price | modulo: 100 | prepend: '00' | slice: -2, 2 -%}{%- assign dollars = bold_variant_price | default: bold_variant.price | times: 0.01 | floor -%}{{- dollars | append: '.' | append: cents | json -}}{%- endunless -%}, +"weight":{{- bold_variant.weight | json -}}, +"compare_at_price":{%- if bold_base_variant.compare_at_price == blank -%}null{% else %}{%- unless price_style == 'json' -%}{{- bold_variant_compare_at_price | default: bold_variant.compare_at_price | json -}}{%- else -%}{%- assign cents = bold_variant_compare_at_price | default: bold_variant.compare_at_price | modulo: 100 | prepend: '00' | slice: -2, 2 -%}{%- assign dollars = bold_variant_compare_at_price | default: bold_variant.compare_at_price | times: 0.01 | floor -%}{{- dollars | append: '.' | append: cents | json -}}{%- endunless -%}{%- endif -%}, +"inventory_quantity":{{- bold_variant_inventory_quantity | default: variant.inventory_quantity | json -}}, +"inventory_management":{{- bold_variant_inventory_management | default: variant.inventory_management | json -}}, +"inventory_policy":{{- bold_variant_inventory_policy | default: variant.inventory_policy | json -}}, +"inventory_in_cart": {{- bold_variant_cart_quantity | default: 0 | json -}}, +"inventory_remaining":{{- bold_variant_remaining_quantity | default: bold_variant_inventory_quantity | default: bold_variant.inventory_quantity | json -}}, +"incoming":{{- bold_variant.incoming | default: bold_base_variant.incoming | json -}}, +"next_incoming_date":{{- bold_variant.next_incoming_date | default: bold_base_variant.next_incoming_date | date: "%Y-%m-%d" | json -}}, +"taxable":{%- unless bold_variant_taxable == blank -%}{{- bold_variant_taxable | json -}}{%- else -%}{{- bold_variant.taxable | json -}}{%- endunless -%}, +"barcode":{{- variant.barcode | json -}} +{%- comment -%} SPECIAL HANDLING FOR CSP {%- endcomment -%} +{%- if variant_has_csp -%} +,"csp_lookup":{ +{%- assign not_first_tag = false -%} +{%- for tag in all_shop_tags -%} +{%- assign found_variant = '' -%} +{%- if not_first_tag -%},{%- endif -%}{%- assign not_first_tag = true -%} +{{- tag | json -}}: +{%- for csp_variant in bold_variant_base_product.variants -%} +{%- if csp_variant.metafields.shappify_csp.csp_qty and csp_variant.metafields.shappify_csp.csp_qty != 1 -%}{%- continue -%}{%- endif -%} +{%- assign base_check = csp_variant.metafields.shappify_csp.csp_base | default: csp_variant.id%} +{%- if base_check == bold_base_variant.id and csp_variant.metafields.shappify_csp.csp_tag == tag -%} +{%- assign found_variant = csp_variant -%} +{{- break -}} +{%- endif -%} +{%- endfor -%} +{ +"id":{{- found_variant.id | default: variant.id | json}}, +"price":{{- found_variant.price | default: variant.price | json}} +{%- if found_variant.metafields.shappify_csp.pricing_html -%},"grid":{{- found_variant.metafields.shappify_csp.pricing_html | json -}}{%- endif -%} +} +{%- endfor -%} +} +{%- endif -%} +{%- comment -%} END OF CSP SPECIAL HANDLING {%- endcomment -%} +{%- comment -%} SPECIAL HANDLING FOR BTM {%- endcomment -%} +{%- if variant_has_btm -%} +,"btm_lookup":{{- bold_variant.metafields.bold_measurement | json -}} +{%- endif -%} +{%- comment -%} END OF BTM SPECIAL HANDLING {%- endcomment -%} +{%- comment -%} SPECIAL HANDLING FOR QB {%- endcomment -%} +{%- if variant_has_qb -%} +,"qb_lookup":{ +"levels": { +{%- assign qb_price_varies = false -%} +{%- assign not_first_tag = false -%} +{%- for qb_variant in bold_variant_base_product.variants -%} +{%- if qb_variant.metafields.shappify_qb.qb_parent == bold_variant.id or qb_variant.metafields.shappify_csp.csp_base == bold_base_variant.id or qb_variant.id == bold_base_variant.id -%} +{%- if qb_variant.metafields.shappify_csp.csp_tag == blank or qb_variant.metafields.shappify_csp.csp_tag == bold_variant_customer_tag -%} +{%- if not_first_tag -%},{%- endif -%}{%- assign not_first_tag = true -%} +{%- unless qb_variant.price == bold_variant.price -%}{%- assign qb_price_varies = true -%}{%- endunless -%} +"{{- qb_variant.metafields.shappify_qb.qb_qty | default: qb_variant.metafields.shappify_csp.csp_qty | default: 1 -}}": {"id":{{- qb_variant.id -}},"price":{{- qb_variant.price -}}} +{%- endif -%} +{%- endif -%} +{%- endfor -%} +} +{%- if qb_price_varies -%} +,"qb_price_varies": {{- qb_price_varies | json -}} +,"grid": {{- bold_variant.metafields.shappify_qb.pricing_html | default: bold_variant.metafields.shappify_csp.pricing_html | json -}} +{%- endif -%} +} +{%- endif -%} +{%- comment -%} END OF QB SPECIAL HANDLING {%- endcomment -%} +{%- comment -%} SPECIAL HANDLING FOR RO {%- endcomment -%} +{%- if variant_has_ro -%} +,"ro_lookup":{{- bold_variant.metafields.bold_rp | json | remove: 'rp_' -}} +{%- endif -%} +{%- comment -%} END OF RO SPECIAL HANDLING {%- endcomment -%} +{%- comment -%} SPECIAL HANDLING FOR BUNDLES {%- endcomment -%} +{%- if variant_has_bdl -%} +,"bdl_lookup":{ +{%- for bdl_variant in base_product.variants -%} +{%- unless bold_variant.id == bdl_variant.metafields.shappify_bundle.bundle_parent -%}{%- continue -%}{%- endunless -%} +"id":{{- bdl_variant.id -}}, +"price":{{- bdl_variant.price | json -}}, +"bundle_group":{{- bdl_variant.metafields.shappify_bundle.bundle_group -}} +{%- break -%} +{%- endfor -%} +} +{%- endif -%} +{%- comment -%} END OF BUNDLES SPECIAL HANDLING {%- endcomment -%} +} +{%- endif -%} diff --git a/src/templates/search.liquid b/src/templates/search.liquid index 09e3d13..efdaee6 100644 --- a/src/templates/search.liquid +++ b/src/templates/search.liquid @@ -53,6 +53,7 @@ {% endif %}
{% for item in search.results %} + {% include 'bold-product' with item, hide_action: 'skip' %} {% include 'easylockdown_filter_search' with item %} {% comment %} Check if the product is on sale and set a variable to be used below. From d6e24241d26a99f113295453314766525cafdf8d Mon Sep 17 00:00:00 2001 From: reiddk Date: Tue, 18 Sep 2018 17:23:44 -0600 Subject: [PATCH 2/4] feat(static hero): static hero section (#185) * feat(lazy loading): added a lazy loading snippet using a supported library * feat(hero static): added lazyload support and static hero section * fix(name change): got rid of name change used for testing * fix(text orientation): had the text orientation backwards * fix(orientation default): changed orientation default * refactor(unused setting): got rid of unused setting * fix(added character): got rid of added character that shouldn't be there --- package-lock.json | 5 ++ package.json | 1 + src/assets/scripts/util/autofit-images.js | 1 - src/assets/styles/app.scss | 1 + src/assets/styles/sections/static-hero.scss | 20 +++++ src/sections/static-hero.liquid | 97 +++++++++++++++++++++ src/snippets/lazy-load-background.liquid | 21 +++++ src/snippets/lazy-load-image.liquid | 23 +++++ src/snippets/script-tags-head.liquid | 1 + webpack.config.js | 9 +- yarn.lock | 4 + 11 files changed, 177 insertions(+), 6 deletions(-) create mode 100644 src/assets/styles/sections/static-hero.scss create mode 100644 src/sections/static-hero.liquid create mode 100644 src/snippets/lazy-load-background.liquid create mode 100644 src/snippets/lazy-load-image.liquid diff --git a/package-lock.json b/package-lock.json index a60f7df..b115ac7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13294,6 +13294,11 @@ "integrity": "sha1-va6+rTD42CQDnODOFJ1Nqge6H6w=", "dev": true }, + "lazysizes": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.2.tgz", + "integrity": "sha512-8NPoH8YIvJtXgKw5eURLNYb+UrQ42pjDTi/s1qITv+c9+CYhAaPXQI5rWDqjMSHaa8ogUaLeQ+ry5k4s/B3uTA==" + }, "lazystream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz", diff --git a/package.json b/package.json index 5594c44..62a8ddd 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "imports-loader": "^0.8.0", "jquery": "1.11.0", "jquery.scrollto": "^2.1.2", + "lazysizes": "^4.1.2", "lodash": "3.9.3", "masonry-layout": "3.3.0", "normalize.css": "^8.0.0", diff --git a/src/assets/scripts/util/autofit-images.js b/src/assets/scripts/util/autofit-images.js index a4a7d74..d0d6e22 100644 --- a/src/assets/scripts/util/autofit-images.js +++ b/src/assets/scripts/util/autofit-images.js @@ -20,7 +20,6 @@ var autoFitImages = { }); this.loadImagesByWidth(autoFitImages.el.imageString, autoFitImages.el.backgroundString); this.loadIfNotVisible(0); - }, getClosestWidth: function(element, baseNode) { var elementWidth = element.offsetWidth; diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index f40bf98..c72175f 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -65,6 +65,7 @@ @import './sections/story-grid'; @import './sections/testimonials'; @import './sections/cookie-notification'; +@import './sections/static-hero'; // Templates TODO - product entry point @import './templates/password-page'; diff --git a/src/assets/styles/sections/static-hero.scss b/src/assets/styles/sections/static-hero.scss new file mode 100644 index 0000000..eb2e6fd --- /dev/null +++ b/src/assets/styles/sections/static-hero.scss @@ -0,0 +1,20 @@ +.static-hero { + height:500px; + width:100%; + background-size:cover; + background-repeat:no-repeat; + background-position:center; + h2 { + font-family: 'CooperHewitt-Bold'; + } + .top-margin { + margin-top: 25%; + } + .button-margin { + margin-top: 5%; + a { + padding: 10px 35px !important; + font-family: 'CooperHewitt-Light' !important; + } + } +} \ No newline at end of file diff --git a/src/sections/static-hero.liquid b/src/sections/static-hero.liquid new file mode 100644 index 0000000..fff4868 --- /dev/null +++ b/src/sections/static-hero.liquid @@ -0,0 +1,97 @@ + +
+
+
+
+ {% if section.settings.text_orientation == 'two' %} +
+ {% endif %} +
+
+

{{section.settings.header}}

+
+
{{section.settings.text}}
+
+ {% assign text = section.settings.button_text %} + {% assign url = section.settings.button_link %} + {% include 'cta-button' %} +
+
+
+
+
+ +
+
+ +{% assign backgroundImageWidths = "1100 1300 1500" %} +{% assign backgroundClass = ".static-hero" %} +{% assign imageObject = section.settings.static_image_background %} +{% include 'lazy-load-background' %} + + + +{% schema %} + { + "name": "static hero", + "class": "static-hero-wrapper", + "settings": [ + { + "type": "image_picker", + "id": "static_image_background", + "label": "Background Image", + "info": "Required. Should be at least 1100 pixels wide." + }, + { + "type": "radio", + "id": "text_orientation", + "label": "Text left vs Text right", + "options": [ + { "value": "one", "label": "Text left" }, + { "value": "two", "label": "Text right" } + ], + "default": "two", + "info": "This determines the orientation of this section" + }, + { + "type":"text", + "id":"header", + "label":"Section 2 Headline", + "default":"DESIGNER 725" + }, + { + "type": "color", + "id": "header_color", + "label": "Header Color", + "default": "#FFFFFF" + }, + { + "type":"text", + "id":"text", + "label":"Text", + "default":"SmartBlend technology, multi-speed pulse, a 100-speed touch slider, and a sleek, show-stopping design make the Designer 725 the star of any kitchen." + }, + { + "type": "color", + "id": "text_color", + "label": "Text Color", + "default": "#FFFFFF" + }, + { + "type":"text", + "id": "button_text", + "label":"Button Text", + "default":"Shop" + }, + { + "type": "url", + "id": "button_link", + "label": "Button Link" + } + ], + "presets": [{ + "name": "Static Hero", + "category": "Text" + }] + } +{% endschema %} \ No newline at end of file diff --git a/src/snippets/lazy-load-background.liquid b/src/snippets/lazy-load-background.liquid new file mode 100644 index 0000000..eb9feea --- /dev/null +++ b/src/snippets/lazy-load-background.liquid @@ -0,0 +1,21 @@ +{% assign widthsArray = backgroundImageWidths | split: " " | reverse %} +{% assign imageUrls = '' %} +{% assign imageLargest = '' %} + diff --git a/src/snippets/lazy-load-image.liquid b/src/snippets/lazy-load-image.liquid new file mode 100644 index 0000000..e3bdeea --- /dev/null +++ b/src/snippets/lazy-load-image.liquid @@ -0,0 +1,23 @@ +{% assign widthsArray = imageWidths | split: " " %} +{% assign imageUrls = '' %} +{% assign imageSmallest = '' %} + +{% for width in widthsArray %} + {% assign addedX = width | append: 'x' %} + {% assign addedW = width | append: 'w, ' | prepend: ' ' %} + {% assign addedPX = width | append: 'px ' %} + {% assign tempImage = imageObject | img_url: addedX %} + {% if imageUrls.size == 0 %} + {% assign imageSmallest = tempImage %} + {% endif %} + {% assign imageUrls = imageUrls | append: tempImage | append: addedW %} +{% endfor %} + + +{{ image_object.alt | escape }} diff --git a/src/snippets/script-tags-head.liquid b/src/snippets/script-tags-head.liquid index e768aeb..c3b2cd4 100644 --- a/src/snippets/script-tags-head.liquid +++ b/src/snippets/script-tags-head.liquid @@ -5,6 +5,7 @@ + {{ 'vendor.min.js' | asset_url | script_tag }} {% comment %} diff --git a/webpack.config.js b/webpack.config.js index 19b466a..077ed1f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -30,8 +30,8 @@ const miniCssExtractPlugin = new MiniCssExtractPlugin({ filename: 'assets/[name].bundle.css' }); -const optimizeCssAssetPlugin = new OptimizeCssAssetsPlugin({}) - +const optimizeCssAssetPlugin = new OptimizeCssAssetsPlugin({}) + module.exports = { entry: { app: './src/assets/scripts/layout/app.js', @@ -41,7 +41,7 @@ module.exports = { index: './src/assets/scripts/templates/index.js', registration: './src/assets/scripts/templates/registration.js', warranty: './src/assets/scripts/templates/warranty.js', - vendor: ['lodash', 'slick-carousel', 'imagesloaded'], + vendor: ['lodash', 'slick-carousel', 'imagesloaded', 'lazysizes'], }, externals: { jquery: 'jQuery', @@ -51,10 +51,9 @@ module.exports = { path: path.resolve(__dirname, 'dist'), filename: 'assets/[name].bundle.js', }, - plugins: [ copyWebpackPluginConf, - miniCssExtractPlugin + miniCssExtractPlugin, ], module: { rules: [{ diff --git a/yarn.lock b/yarn.lock index dd1b157..91dbd50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7208,6 +7208,10 @@ lazy-req@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-1.1.0.tgz#bdaebead30f8d824039ce0ce149d4daa07ba1fac" +lazysizes@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/lazysizes/-/lazysizes-4.1.2.tgz#98104926b519e2b72d05bc9833293b229132cab4" + lazystream@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4" From c2a390aca78df9b5ce1eeec0bc5436d92662f61f Mon Sep 17 00:00:00 2001 From: reiddk Date: Thu, 20 Sep 2018 16:13:41 -0600 Subject: [PATCH 3/4] * feat(image text section): static image text section (#186) * feat(lazy loading): added a lazy loading snippet using a supported library * feat(hero static): added lazyload support and static hero section * fix(name change): got rid of name change used for testing * fix(text orientation): had the text orientation backwards * fix(orientation default): changed orientation default * refactor(unused setting): got rid of unused setting * fix(added character): got rid of added character that shouldn't be there * feat(image text section): static image text section (#186) * feat(added image text section): added the image text section * feat(background image): added background image to image text section --- src/assets/styles/app.scss | 1 + src/assets/styles/sections/image-text.scss | 23 ++++ src/sections/image-text.liquid | 116 +++++++++++++++++++++ 3 files changed, 140 insertions(+) create mode 100644 src/assets/styles/sections/image-text.scss create mode 100644 src/sections/image-text.liquid diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index c72175f..f0f367f 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -66,6 +66,7 @@ @import './sections/testimonials'; @import './sections/cookie-notification'; @import './sections/static-hero'; +@import './sections/image-text'; // Templates TODO - product entry point @import './templates/password-page'; diff --git a/src/assets/styles/sections/image-text.scss b/src/assets/styles/sections/image-text.scss new file mode 100644 index 0000000..8ffe12c --- /dev/null +++ b/src/assets/styles/sections/image-text.scss @@ -0,0 +1,23 @@ +.image-text { + width:100%; + background-size:cover; + background-repeat:no-repeat; + background-position:center; + h2 { + font-family: 'CooperHewitt-Bold'; + } + .top-margin { + margin-top: 100px; + } + .button-margin { + margin-top: 25px; + margin-bottom:100px; + a { + padding: 10px 35px !important; + font-family: 'CooperHewitt-Light' !important; + } + } + .image-text-image { + width:100%; + } +} \ No newline at end of file diff --git a/src/sections/image-text.liquid b/src/sections/image-text.liquid new file mode 100644 index 0000000..007c98f --- /dev/null +++ b/src/sections/image-text.liquid @@ -0,0 +1,116 @@ + +
+
+
+
+ {% if section.settings.text_orientation == 'two' %} +
+ {% assign imageWidths = "400 600 800 1000" %} + {% assign imageObject = section.settings.section_image %} + {% assign imageClasses = 'image-text-image' %} + {% include 'lazy-load-image' %} +
+ {% endif %} +
+
+

{{section.settings.header}}

+
+
{{section.settings.text}}
+
+ {% assign text = section.settings.button_text %} + {% assign url = section.settings.button_link %} + {% include 'cta-button' %} +
+
+
+ {% if section.settings.text_orientation == 'one' %} +
+ {% assign imageWidths = "400 600 800 1000" %} + {% assign imageObject = section.settings.section_image %} + {% assign imageClasses = 'image-text-image' %} + {% include 'lazy-load-image' %} +
+ {% endif %} +
+
+ +
+
+ +{% if section.settings.static_image_background %} + {% assign backgroundImageWidths = "1100 1300 1500" %} + {% assign backgroundClass = ".image-text" %} + {% assign imageObject = section.settings.static_image_background %} + {% include 'lazy-load-background' %} +{% endif %} + +{% schema %} + { + "name": "Image Text", + "class": "image-text-wrapper", + "settings": [ + { + "type": "image_picker", + "id": "section_image", + "label": "Section Image", + "info": "Required." + }, + { + "type": "image_picker", + "id": "static_image_background", + "label": "Section Background Image", + "info": "Make at least 1100 px wide" + }, + { + "type": "radio", + "id": "text_orientation", + "label": "Text left vs Text right", + "options": [ + { "value": "one", "label": "Text left" }, + { "value": "two", "label": "Text right" } + ], + "default": "two", + "info": "This determines the orientation of this section" + }, + { + "type":"text", + "id":"header", + "label":"Section 2 Headline", + "default":"BEST BLENDER" + }, + { + "type": "color", + "id": "header_color", + "label": "Header Color", + "default": "#000000" + }, + { + "type":"text", + "id":"text", + "label":"Text", + "default":"Every Blendtec is professional-grade with the most powerful motors in the industry, the longest warranty in the business, and fashion-forward industrial designs that look great on your countertop. Blendtec blenders are the most advanced blenders you can buy." + }, + { + "type": "color", + "id": "text_color", + "label": "Text Color", + "default": "#000000" + }, + { + "type":"text", + "id": "button_text", + "label":"Button Text", + "default":"Get Yours" + }, + { + "type": "url", + "id": "button_link", + "label": "Button Link" + } + ], + "presets": [{ + "name": "Image Text", + "category": "Text" + }] + } +{% endschema %} \ No newline at end of file From f64f97270e12b7cae937319ef3259a9ee60c8033 Mon Sep 17 00:00:00 2001 From: reiddk Date: Thu, 20 Sep 2018 16:21:41 -0600 Subject: [PATCH 4/4] feat(static recipe section): featured recipes * feat(lazy loading): added a lazy loading snippet using a supported library * feat(hero static): added lazyload support and static hero section * fix(name change): got rid of name change used for testing * fix(text orientation): had the text orientation backwards * fix(orientation default): changed orientation default * refactor(unused setting): got rid of unused setting * fix(added character): got rid of added character that shouldn't be there * feat(image text section): static image text section (#186) * feat(added image text section): added the image text section * feat(background image): added background image to image text section * feat(recipe cards): added the recipe cards section * feat(more settings): added more settings to the recipe cards --- .travis.yml | 4 +- src/assets/styles/app.scss | 1 + src/assets/styles/sections/recipe-cards.scss | 37 +++++++++ src/sections/recipe-cards.liquid | 81 ++++++++++++++++++++ src/snippets/recipe-card.liquid | 14 ++++ 5 files changed, 135 insertions(+), 2 deletions(-) create mode 100644 src/assets/styles/sections/recipe-cards.scss create mode 100644 src/sections/recipe-cards.liquid create mode 100644 src/snippets/recipe-card.liquid diff --git a/.travis.yml b/.travis.yml index 86f39b1..c6d879c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -28,12 +28,12 @@ after_success: deploy: - provider: script skip_cleanup: true - script: npm run release && theme upload -d dist -p $PROD_PASSWORD -s $PROD_SHOP -t $PROD_THEME_ID --force --no-update-notifier --ignores './themekit_ignores' + script: npm run release && theme upload -d dist -p $PROD_PASSWORD -s $PROD_SHOP -t $PROD_THEME_ID --no-update-notifier --ignores './themekit_ignores' on: branch: master - provider: script skip_cleanup: true - script: theme upload -d dist -p $STAGE_PASSWORD -s $STAGE_SHOP -t $STAGE_THEME_ID --force --no-update-notifier --ignores './themekit_ignores' + script: theme upload -d dist -p $STAGE_PASSWORD -s $STAGE_SHOP -t $STAGE_THEME_ID --no-update-notifier --ignores './themekit_ignores' on: branch: develop diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index f0f367f..2d7688b 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -67,6 +67,7 @@ @import './sections/cookie-notification'; @import './sections/static-hero'; @import './sections/image-text'; +@import './sections/recipe-cards'; // Templates TODO - product entry point @import './templates/password-page'; diff --git a/src/assets/styles/sections/recipe-cards.scss b/src/assets/styles/sections/recipe-cards.scss new file mode 100644 index 0000000..5938d6a --- /dev/null +++ b/src/assets/styles/sections/recipe-cards.scss @@ -0,0 +1,37 @@ +.recipe-cards { + margin: 50px 0px; + .grid { + max-width:1200px; + margin:auto; + padding-right:30px; + } + .btn { + width: 100% !important; + font-size: 1.2em; + font-family: 'CooperHewitt-Medium'; + } + .section-title { + font-size: 2em; + font-family: 'CooperHewitt-Bold'; + } +} + +.recipe-card { + margin: 50px 0px; + height: 500px; + position:relative; + width:100%; + background-size:cover; + background-repeat:no-repeat; + background-position:center; + .btn { + position:absolute; + bottom: 0px; + } + .card-title { + color: white; + font-size: 2em; + padding: 20px; + font-family: 'CooperHewitt-Medium'; + } +} \ No newline at end of file diff --git a/src/sections/recipe-cards.liquid b/src/sections/recipe-cards.liquid new file mode 100644 index 0000000..421f7d3 --- /dev/null +++ b/src/sections/recipe-cards.liquid @@ -0,0 +1,81 @@ + +
+
+
{{section.settings.section_title}}
+
+ {% assign text = section.settings.more_recipes %} + {% assign url = section.settings.recipes_link %} + {% include 'cta-button' %} +
+
+
+ {% assign viewRecipes = section.settings.view_recipe %} +
+ {% assign art = articles[section.settings.featured_article] %} + {% assign cardClass = 'recipe-card-1' %} + {% include 'recipe-card' %} +
+
+ {% assign art = articles[section.settings.featured_article_2] %} + {% assign cardClass = 'recipe-card-2' %} + {% include 'recipe-card' %} +
+
+ {% assign art = articles[section.settings.featured_article_3] %} + {% assign cardClass = 'recipe-card-3' %} + {% include 'recipe-card' %} +
+
+
+ + +{% schema %} + { + "name": "Recipe Cards", + "class": "recipe-cards-wrapper", + "settings": [ + { + "type": "article", + "id": "featured_article", + "label": "Choose a recipe you want to display." + }, + { + "type": "article", + "id": "featured_article_2", + "label": "Choose a recipe you want to display." + }, + { + "type": "article", + "id": "featured_article_3", + "label": "Choose a recipe you want to display." + }, + { + "type":"text", + "id":"more_recipes", + "label":"Top Button", + "default":"View More Recipes" + }, + { + "type":"text", + "id":"view_recipe", + "label":"View Recipe Button", + "default":"View Recipe" + }, + { + "type": "url", + "id": "recipes_link", + "label": "More Recipes Link" + }, + { + "type":"text", + "id":"section_title", + "label":"Section title", + "default":"RECIPES" + } + ], + "presets": [{ + "name": "Recipe Cards", + "category": "Text" + }] + } +{% endschema %} \ No newline at end of file diff --git a/src/snippets/recipe-card.liquid b/src/snippets/recipe-card.liquid new file mode 100644 index 0000000..7feaf45 --- /dev/null +++ b/src/snippets/recipe-card.liquid @@ -0,0 +1,14 @@ +
+
+ {{art.title}} +
+{% assign text = viewRecipes %} +{% assign url = art.url %} +{% include 'cta-button' %} +
+{% if art.image %} + {% assign backgroundImageWidths = "1100 1300 1500" %} + {% assign backgroundClass = "." | append: cardClass %} + {% assign imageObject = art.image %} + {% include 'lazy-load-background' %} +{% endif %} \ No newline at end of file