Shopify [液体] - 基于天的横幅的自定义框

Question

我的任务是自定义一个框或创建一个部分，以便我们可以放置一个主图像，该图像将根据设置进行更改。例如：我有图片1和图片2。我希望图片 2 仅在周末显示；此外，最好设置一个到期日期，这样即使我们忘记停用它，我们的客户也不会被误导以为促销仍在进行中。

我对网页设计领域真的很陌生，所以我选择了一个已经存在的盒子（并且有点接近我想要的）。我重新设计了它，它工作，但我想知道是否有更好的方法来做到这一点。

这是我添加到“简单”框中的内容。

{
    "type": "simple",
    "name": "Simple",
    "settings": [
      {
        "type": "url",
        "id": "link",
        "label": "Link"
      },
      {
        "type": "text",
        "id": "text",
        "label": "Title"
      },
      {
        "type": "image_picker",
        "id": "image",
        "label": "Imagen principal"
      },
      {
        "type": "image_picker",
        "id": "imagepar",
        "label": "Imagen de promoción"
      },
      {
        "type": "header",
        "content": "Layout"
      },
      {
        "type": "select",
        "id": "width",
        "label": "Width",
        "default": "50",
        "options": [
          {
            "value": "33",
            "label": "33%"
          },
          {
            "value": "50",
            "label": "50%"
          },
          {
            "value": "100",
            "label": "100%"
          }
        ]
      },

这是您可以选择要显示促销的日期的部分。我感觉它可能会更好。但据我所知，Shopify 没有盒子的日期/日期选择器。

      {
    "type": "header",
    "content": "Elige los días"
     },
    {
        "type": "checkbox",
        "id": "Lunes",
        "label": "Lunes",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Martes",
        "label": "Martes",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Miercoles",
        "label": "Miércoles",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Jueves",
        "label": "Jueves",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Viernes",
        "label": "Viernes",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Sabado",
        "label": "Sábado",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Domingo",
        "label": "Domingo",
        "default": false
      },

现在，我称之为：

{%- when 'simple' -%}
            {%- liquid
              assign block_img = ''
              assign block_text = ''
              if block.settings.link contains '/products/'
                assign product_handle = block.settings.link | remove: '/products/'
                assign block_img = all_products[product_handle].featured_media.preview_image
                assign block_text = all_products[product_handle].title
              elsif block.settings.link contains '/collections/'
                assign lang_code_string = request.locale.iso_code | prepend: '/'
                assign collection_handle = block.settings.link | remove: '/collections/' | remove: lang_code_string
                assign block_text = collections[collection_handle].title
                if collections[collection_handle].image
                  assign block_img = collections[collection_handle].image
                else
                  assign block_img = collections[collection_handle].products[0].featured_image
                endif
              endif
              if block.settings.text != ''
                assign block_text = block.settings.text
              endif
              assign todaynumber = 'now' | date: '%u'
              case todaynumber
                when '1'
                    if block.settings.Lunes
                        assign checkday = true
                    endif
                when '2'
                    if block.settings.Martes
                        assign checkday = true
                    endif                
                when '3'
                    if block.settings.Miercoles
                        assign checkday = true
                    endif
                when '4'
                    if block.settings.Jueves
                        assign checkday = true
                    endif
                when '5'
                    if block.settings.Viernes
                        assign checkday = true
                    endif
                when '6'
                    if block.settings.Sabado
                        assign checkday = true
                    endif
                when '7'
                    if block.settings.Domingo
                        assign checkday = true
                    endif
                endcase
              if block.settings.image
                if checkday
                    assign block_img = block.settings.imagepar
                else
                    assign block_img = block.settings.image
                endif
              endif
            -%}

所以，如您所见，我使用了case 语句来检查今天的日期并询问复选框是否为真。这有效，但远非漂亮。谁能指出我正确的方向？谢谢！

Answer 1

据我所知，您对发布的代码有 2 个请求：

1. 你想整理你的代码
2. 您想添加一个检查，该检查将在设定的截止日期后禁用促销功能

让我们整理一下代码

对产品和集合使用适当的specialized input settings，而不是在设置中粘贴 URL 并操作字符串。

因此，将"id": "link" 的设置替换为以下内容：

    "settings": [
      {
          "type": "product",
          "id": "product",
          "label": "Product",
          "info": "The image of this product will be used for the block"
      },
      {
          "type": "collection",
          "id": "collection",
          "label": "Collection",
          "info": "If no product is selected, the block image will be the collection image or the image of the first product of the collection"
      },

然后将处理 URL 字符串的代码替换为以下流动代码：

    if block.settings.product
      assign block_text = product.title
      assign block_img = product.featured_media.preview_image
    elsif block.settings.collection
      assign block_text = collection.title
      if collection.image
        assign block_img = collection.image
      else
        assign block_img = collection.products[0].featured_media
      endif
    endif

让我们实施最后期限检查

让我们添加一个文本输入设置，因为我们没有日期选择器

{
  "type": "text",
  "id": "deadline",
  "label": "deadline",
  "info": "Insert date in the format dd-mm-yyyy"
}

不幸的是，我们无法对此输入进行客户端验证，因此我们可能会在不信任用户的情况下在流动性中使用此设置（如果截止日期输入无效，则更好地解释它在截止日期已到期时表现相同的广告通过）。

基本上，您不必使用split filter 解析输入文本并将其与now 进行比较。 见你的线assign todaynumber = 'now' | date: '%u'... 将比较结果包含在布尔值中后，您可以使用此变量将我们目前生成的所有代码包装在一个大的 if 语句中。

我把实现留给你...