Add shipping text to atc button prestige theme

Add shipping text to atc button prestige theme

Issyeissue
Excursionist
27 0 7

I am trying to add a responsive shipping date to my atc button, but everytime I select another variant, it keeps going away

 

IMG_0575.jpg

 

Buy buttons liquid with code: 

 

{%- if product != blank -%}
{%- assign variant_picker_block = section.blocks | where: 'type', 'variant_picker' | first -%}

{%- assign recipient_feature_active = false -%}

{%- if product.gift_card? and show_gift_card_recipient -%}
{%- assign recipient_feature_active = true -%}
{%- assign show_payment_button = false -%}
{%- endif -%}

{%- form 'product', product, is: 'product-form', id: form_id -%}
<input type="hidden" {% if variant_picker_block != blank %}disabled{% endif %} name="id" value="{{ product.selected_or_first_available_variant.id }}">

{% liquid
assign button_disabled = false

if product.selected_or_first_available_variant.available == false
assign button_disabled = true
assign button_content = 'product.general.sold_out_button' | t
else
if product.template_suffix contains 'pre-order'
assign button_content = 'product.general.pre_order_button' | t
else
assign button_content = 'product.general.add_to_cart_button' | t
endif
endif
%}

<div class="v-stack gap-4">
{%- if recipient_feature_active -%}
<gift-card-recipient class="gift-card-recipient v-stack gap-3">
{%- assign checkbox_label = 'gift_card.recipient.checkbox' | t -%}
{%- render 'checkbox', label: checkbox_label, name: 'properties[__shopify_send_gift_card_to_recipient]' -%}

<div class="gift-card-recipient__fields js:hidden">
<div class="fieldset">
{%- liquid
assign recipient_email_label = 'gift_card.recipient.email_label' | t
render 'input', type: 'email', label: recipient_email_label, name: 'properties[Recipient email]', value: form.email, required: true

assign recipient_name_label = 'gift_card.recipient.name_label' | t
render 'input', label: recipient_name_label, name: 'properties[Recipient name]', value: form.name

assign send_on_label = 'gift_card.recipient.send_on_label' | t
render 'input', type: 'date', label: send_on_label, name: 'properties[Send on]', value: form.send_on, pattern: '\d{4}-\d{2}-\d{2}'
render 'input', type: 'hidden', name: 'properties[__shopify_offset]'

assign message_label = 'gift_card.recipient.message_label' | t
render 'input', label: message_label, name: 'properties[Message]', value: form.message, multiline: 3, maxlength: 200, show_max_characters_count: true
-%}
</div>
</div>
</gift-card-recipient>
{%- endif -%}

<buy-buttons class="buy-buttons {% if show_payment_button %}buy-buttons--has-dynamic{% endif %}" template="{{ product.template_suffix | escape }}" form="{{ form_id }}">
{%- if show_payment_button and atc_button_background == blank and atc_button_text_color == blank -%}
{%- assign atc_button_style = 'outline' -%}
{%- else -%}
{%- assign atc_button_style = 'solid' -%}
{%- endif -%}

{%- capture current_date %}
{{ 'now' | date: "%s" | plus: 86400 | date: "%d %B" }}
{%- endcapture %}

{%- assign shipping_text = "Ships <b>" | append: current_date | append: "</b>" -%}

{%- assign button_content_with_date = "<div style='display: flex; justify-content: center; align-items: center;'><span style='font-size: 1em; margin-right: 10px;'>" | append: button_content | append: "</span><span style='font-size: 0.75em;'>" | append: shipping_text | append: "</span></div>" -%}

{%- render 'button', content: button_content_with_date | escape, type: 'submit', disabled: button_disabled, style: atc_button_style, background: atc_button_background, text_color: atc_button_text_color, stretch: true -%}

{%- if show_payment_button -%}
{{- form | payment_button -}}

<style>
#shopify-section-{{ section.id }} .shopify-payment-button {
{%- if payment_button_background != blank and payment_button_background != 'rgba(0,0,0,0)' -%}
--button-background: {{ payment_button_background.rgb }};
{%- endif -%}

{%- if payment_button_text_color != blank and payment_button_text_color != 'rgba(0,0,0,0)' -%}
--button-text-color: {{ payment_button_text_color.rgb }};
{%- endif -%}

{%- unless product.selected_or_first_available_variant.available -%}
display: none;
{%- endunless -%}
}
</style>
{%- endif -%}
</buy-buttons>
</div>
{%- endform -%}
{%- else -%}
<buy-buttons class="buy-buttons" template="{{ product.template_suffix | escape }}" form="{{ form_id }}">
{%- capture current_date %}
{{ 'now' | date: "%s" | plus: 86400 | date: "%d %B" }}
{%- endcapture %}

{%- assign shipping_text = "Ships <b>" | append: current_date | append: "</b>" -%}

{%- assign button_content = 'product.general.add_to_cart_button' | t -%}
{%- assign button_content_with_date = "<div style='display: flex; justify-content: center; align-items: center;'><span style='font-size: 1em; margin-right: 10px;'>" | append: button_content | append: "</span><span style='font-size: 0.75em;'>" | append: shipping_text | append: "</span></div>" -%}

{%- render 'button', content: button_content_with_date | escape, type: 'submit', background: variant_picker_block.settings.atc_button_background, text_color: variant_picker.settings.atc_button_text_color, stretch: true -%}
</buy-buttons>
{%- endif -%}

Replies 2 (2)

EcomGraduates
Shopify Partner
858 71 124

It looks like your shipping date isn't updating when you select different variants. This is because the variant change doesn't trigger the re-render of the shipping date. You can fix this by using JavaScript to update the shipping date dynamically when the variant changes.

Here's a quick way to add that functionality:

 

 

document.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('form');
  var dateSpan = document.querySelector('#shipping-date'); // Add an id to your date span
  var updateDate = function() {
    var date = new Date();
    date.setDate(date.getDate() + 1);
    var options = { day: '2-digit', month: 'long' };
    dateSpan.innerHTML = `Ships <b>${date.toLocaleDateString('en-US', options)}</b>`;
  };

  form.addEventListener('change', function(event) {
    if (event.target.name === 'id') {
      updateDate();
    }
  });

  updateDate(); // Initial call
});

 

{%- assign shipping_text = "<span id='shipping-date'>Ships <b>" | append: current_date | append: "</b></span>" -%}

 

Update your HTML to include an id for the date span

This script updates the shipping date whenever a variant is selected


 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner



Issyeissue
Excursionist
27 0 7

I can't seem to get it to work, where do I need to integrate it in the code?