Skip to content

Move share button into a snippet #2123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 21, 2022
Merged

Move share button into a snippet #2123

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7878877
Move share button into a snippet
ludoboludo Nov 14, 2022
84e40b7
change the property name to context and add details in snippet
ludoboludo Nov 15, 2022
cb1f8cb
address review comments
ludoboludo Nov 16, 2022
bfd9b93
edit props names and description
ludoboludo Nov 17, 2022
094e479
Address reviewers comment. Remove unused prop and edit existing ID
ludoboludo Nov 18, 2022
4ee87b6
move script at the top
ludoboludo Nov 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 7 additions & 36 deletions sections/featured-product.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,42 +198,13 @@
</div>
{%- when 'share' -%}
<script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
<share-button id="Share-{{ section.id }}" class="share-button" {{ block.shopify_attributes }}>
<button class="share-button__button hidden">
{% render 'icon-share' %}
{{ block.settings.share_label | escape }}
</button>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary class="share-button__button">
{% render 'icon-share' %}
{{ block.settings.share_label | escape }}
</summary>
<div id="Product-share-{{ section.id }}" class="share-button__fallback motion-reduce">
<div class="field">
<span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
</span>
<input
type="text"
class="field__input"
id="url"
value="{{ product.selected_variant.url | default: product.url | prepend: request.origin }}"
placeholder="{{ 'general.share.share_url' | t }}"
onclick="this.select();"
readonly
>
<label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
</div>
<button class="share-button__close hidden no-js-hidden">
{% render 'icon-close' %}
<span class="visually-hidden">{{ 'general.share.close' | t }}</span>
</button>
<button class="share-button__copy no-js-hidden">
{% render 'icon-clipboard' %}
<span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
</button>
</div>
</details>
</share-button>
{% assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin %}
{% render 'share-button-block',
context: block,
origin: 'Featured-Product',
share_value: share_url
%}

{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
Expand Down
41 changes: 6 additions & 35 deletions sections/main-article.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,42 +53,13 @@

{%- when 'share' -%}
<div class="article-template__social-sharing page-width page-width--narrow" {{ block.shopify_attributes }}>
<share-button class="share-button" {{ block.shopify_attributes }}>
<button class="share-button__button hidden">
{% render 'icon-share' %}
{{ block.settings.share_label | escape }}
</button>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary class="share-button__button">
{% render 'icon-share' %}
{{ block.settings.share_label | escape }}
</summary>
<div id="Article-share-{{ section.id }}" class="share-button__fallback motion-reduce">
<div class="field">
<span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
</span>
<input type="text"
class="field__input"
id="url"
value="{{ request.origin | append: article.url }}"
placeholder="{{ 'general.share.share_url' | t }}"
onclick="this.select();"
readonly
>
<label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
</div>
<button class="share-button__close hidden no-js-hidden">
{% render 'icon-close' %}
<span class="visually-hidden">{{ 'general.share.close' | t }}</span>
</button>
<button class="share-button__copy no-js-hidden">
{% render 'icon-clipboard' %}
<span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
</button>
</div>
</details>
</share-button>
<script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
{% assign share_url = request.origin | append: article.url %}
{% render 'share-button-block',
context: block,
origin: 'Article',
share_value: share_url
%}
</div>
{%- endcase -%}
{%- endfor -%}
Expand Down
47 changes: 7 additions & 40 deletions sections/main-product.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,47 +246,14 @@
{{- block.settings.text -}}
</a>
{%- when 'share' -%}
<share-button
id="Share-{{ section.id }}"
class="share-button quick-add-hidden"
{{ block.shopify_attributes }}
>
<button class="share-button__button hidden">
{% render 'icon-share' %}
{{ block.settings.share_label | escape }}
</button>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary class="share-button__button">
{% render 'icon-share' %}
{{ block.settings.share_label | escape }}
</summary>
<div id="Product-share-{{ section.id }}" class="share-button__fallback motion-reduce">
Copy link
Contributor Author

@ludoboludo ludoboludo Nov 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've remove this id from this element as I don't see why it was needed. When I search for Product-share nothing comes up in the files.

Copy link
Contributor

@kmeleta kmeleta Nov 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also don't see where this would be used so removing it is fine with me. Otherwise I'd suggest just remove the section specific prefix of "Product-" or "Article-"

<div class="field">
<span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
</span>
<input
type="text"
class="field__input"
id="url"
value="{{ product.selected_variant.url | default: product.url | prepend: request.origin }}"
placeholder="{{ 'general.share.share_url' | t }}"
onclick="this.select();"
readonly
>
<label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
</div>
<button class="share-button__close hidden no-js-hidden">
{% render 'icon-close' %}
<span class="visually-hidden">{{ 'general.share.close' | t }}</span>
</button>
<button class="share-button__copy no-js-hidden">
{% render 'icon-clipboard' %}
<span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
</button>
</div>
</details>
</share-button>
<script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
{% assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin %}
{% render 'share-button-block',
context: block,
origin: 'Main-Product',
share_value: share_url
%}

{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
Expand Down
50 changes: 50 additions & 0 deletions snippets/share-button-block.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{% comment %}
Renders share button.
Accepts:
- context: {Object} either passing the block/section.
- origin: {String} file it's coming from to assign IDs.
- share_value: {String} url to share.
Usage:
{% render 'share-button-block',
context: block,
origin: 'Template/Section name',
share_value: share_url
%}
{% endcomment %}
<share-button {% if origin contains 'Product' %}id="Share-{{ section.id }}" {% endif %}class="share-button{% if origin contains 'Main-Product' %} quick-add-hidden{% endif %}" {{ context.shopify_attributes }}>
<button class="share-button__button hidden">
{% render 'icon-share' %}
{{ context.settings.share_label | escape }}
</button>
<details id="Details-{{ context.id }}-{{ section.id }}">
<summary class="share-button__button">
{% render 'icon-share' %}
{{ context.settings.share_label | escape }}
</summary>
<div id="{{ origin }}-share-{{ section.id }}" class="share-button__fallback motion-reduce">
<div class="field">
<span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
</span>
<input
type="text"
class="field__input"
id="url"
Copy link
Contributor

@kmeleta kmeleta Nov 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see this is preexisting, but do you also feel this is a terrible id?

Copy link
Contributor Author

@ludoboludo ludoboludo Nov 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😅 YES

Copy link
Contributor Author

@ludoboludo ludoboludo Nov 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And also it can be a duplicate if you have a featured product section on the product page 😓
Ill change it.

value="{{ share_value }}"
placeholder="{{ 'general.share.share_url' | t }}"
onclick="this.select();"
readonly
>
<label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
</div>
<button class="share-button__close hidden no-js-hidden">
{% render 'icon-close' %}
<span class="visually-hidden">{{ 'general.share.close' | t }}</span>
</button>
<button class="share-button__copy no-js-hidden">
{% render 'icon-clipboard' %}
<span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
</button>
</div>
</details>
</share-button>