@total_onion/onion-library 2.0.53 → 2.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2780,6 +2780,83 @@
2780
2780
  "acfe_flexible_category": false,
2781
2781
  "acfe_layout_col": "auto",
2782
2782
  "acfe_layout_allowed_col": false
2783
+ },
2784
+ "layout_68ee398b832a1": {
2785
+ "key": "layout_68ee398b832a1",
2786
+ "name": "product_image",
2787
+ "label": "Product Image",
2788
+ "display": "block",
2789
+ "sub_fields": [
2790
+ {
2791
+ "key": "field_68ee398b832a5",
2792
+ "label": "Grid layout",
2793
+ "name": "grid_layout",
2794
+ "aria-label": "",
2795
+ "type": "clone",
2796
+ "instructions": "",
2797
+ "required": 0,
2798
+ "conditional_logic": 0,
2799
+ "wrapper": {
2800
+ "width": "",
2801
+ "class": "",
2802
+ "id": ""
2803
+ },
2804
+ "wpml_cf_preferences": 3,
2805
+ "clone": [
2806
+ "group_68822860bda9f"
2807
+ ],
2808
+ "display": "seamless",
2809
+ "layout": "block",
2810
+ "prefix_label": 0,
2811
+ "prefix_name": 0,
2812
+ "acfe_seamless_style": 0,
2813
+ "acfe_clone_modal": 0,
2814
+ "acfe_clone_modal_close": 0,
2815
+ "acfe_clone_modal_button": "",
2816
+ "acfe_clone_modal_size": "large"
2817
+ },
2818
+ {
2819
+ "key": "field_68ee398b832a7",
2820
+ "label": "Product Image Settings Fields",
2821
+ "name": "product_image_settings_fields",
2822
+ "aria-label": "",
2823
+ "type": "clone",
2824
+ "instructions": "",
2825
+ "required": 0,
2826
+ "conditional_logic": 0,
2827
+ "wrapper": {
2828
+ "width": "",
2829
+ "class": "",
2830
+ "id": ""
2831
+ },
2832
+ "wpml_cf_preferences": 3,
2833
+ "clone": [
2834
+ "group_68ee392aa6a26"
2835
+ ],
2836
+ "display": "seamless",
2837
+ "layout": "block",
2838
+ "prefix_label": 0,
2839
+ "prefix_name": 0,
2840
+ "acfe_seamless_style": 0,
2841
+ "acfe_clone_modal": 0,
2842
+ "acfe_clone_modal_close": 0,
2843
+ "acfe_clone_modal_button": "",
2844
+ "acfe_clone_modal_size": "large"
2845
+ }
2846
+ ],
2847
+ "min": "",
2848
+ "max": "",
2849
+ "acfe_flexible_render_template": false,
2850
+ "acfe_flexible_render_style": false,
2851
+ "acfe_flexible_render_script": false,
2852
+ "acfe_flexible_thumbnail": false,
2853
+ "acfe_flexible_settings": false,
2854
+ "acfe_flexible_settings_size": "medium",
2855
+ "acfe_layout_locations": [],
2856
+ "acfe_flexible_modal_edit_size": false,
2857
+ "acfe_flexible_category": false,
2858
+ "acfe_layout_col": "auto",
2859
+ "acfe_layout_allowed_col": false
2783
2860
  }
2784
2861
  },
2785
2862
  "min": "",
@@ -3115,5 +3192,5 @@
3115
3192
  "acfe_display_title": "",
3116
3193
  "acfe_meta": "",
3117
3194
  "acfe_note": "",
3118
- "modified": 1757673908
3195
+ "modified": 1760443034
3119
3196
  }
@@ -0,0 +1,42 @@
1
+ {% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
2
+ {% set imageSelect = field.image_select|ru %}
3
+ {% if imageSelect == 'image_accent' %}
4
+ {% set positionVars = include('components/element-positioning.twig', {fields : field.product_image_positioning, block : block, blockClassName : imageClassname}, with_context = false) %}
5
+ {% endif %}
6
+ {% set imageWidthPercentMobile = '--product-image-width-mobile: ' ~ field.product_image_width ~ '%;' %}
7
+ {% set imageWidthPercentDesktop = '--product-image-width-desktop: ' ~ field.product_image_width ~ '%;' %}
8
+ {% if imageSelect == 'image_accent' %}
9
+ {% set imageWidthPercentMobile = '--product-image-width-mobile: calc(' ~ field.product_image_width_mobile_px ~ ' / var(--mobile-design-reference) * var(--screen-width-mobile));' %}
10
+ {% set imageWidthPercentDesktop = '--product-image-width-desktop: calc(' ~ field.product_image_width_desktop_px ~ ' / var(--desktop-design-reference) * var(--screen-width-desktop));' %}
11
+ {% endif %}
12
+ {% set imageAspectRatioDesktop = '--image-aspect-ratio-desktop:' ~ field.image_aspect_ratio_desktop ~ ';' %}
13
+ {% set imageAspectRatioPortrait = '--image-aspect-ratio-portrait:' ~ field.image_aspect_ratio_portrait ~ ';' %}
14
+ {% set imageAspectRatioMobile = '--image-aspect-ratio-mobile:' ~ field.image_aspect_ratio_mobile ~ ';' %}
15
+ {% set imageFitStyle = '--image-fit-style:' ~ (field.image_fit_style|ru|default('contain')) ~ ';' %}
16
+ {% set styleVars = imageWidthPercentDesktop ~ imageWidthPercentMobile ~ imageWidthPercentMobilePx ~ imageWidthPercentDesktopPx ~ imageAspectRatioDesktop ~ imageAspectRatioPortrait ~ imageAspectRatioMobile ~ imageFitStyle %}
17
+ <style>
18
+ .{{blockClassName}}__product-image-container.{{block.id}}{
19
+ {{styleVars}}
20
+ {{gridLayoutElement}}
21
+ {{positionVars}}
22
+ }
23
+ </style>
24
+ <a aria-label="{{product.title}}" href="{{product.link}}" data-pattern-product-info="link" data-image-select="{{ imageSelect }}" class="{{blockClassName}}__product-image-container {{blockClassName}}__info-item {{blockClassName}}__info-item--{{productType}} {{blockClassName}}__product-image-container--{{imageSelect|replace({'_':'-'})}} {{block.id}}">
25
+ {% set imageSizes = imageSizes|default('(min-width: 1440px) 50vw, (min-width: 768px) 50vw, (min-width: 500px) 50vw, 100vw') %}
26
+ {% set imageFields = [] %}
27
+ {% set imageFields = imageFields|merge({'enable_image' : true}) %}
28
+ {% set imageClassname = 'product-info-v3__product' %}
29
+ {% if attribute(product, 'product_' ~ imageSelect) %}
30
+ {% set imageFields = imageFields|merge({'image' : attribute(product, 'product_' ~ imageSelect)}) %}
31
+ {% elseif attribute(product, productType ~ '_' ~ imageSelect) %}
32
+ {% set imageFields = imageFields|merge({'image' : attribute(product, productType ~ '_' ~ imageSelect)}) %}
33
+ {% elseif attribute(product, 'product_image') %}
34
+ {% set imageFields = imageFields|merge({'image' : attribute(product, 'product_image')}) %}
35
+ {% endif %}
36
+ {{ include('components/single-image.twig', {
37
+ fields: imageFields,
38
+ block: block,
39
+ blockClassName: imageClassname,
40
+ imageSizes: imageSizes
41
+ }, with_context = false) }}
42
+ </a>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.53",
3
+ "version": "2.0.54",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {