Shopify〔Liquid〕-自定义框基于天的横幅

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

据我所知，您有两个关于您发布的代码的请求：

1. 您想要整理您的代码
2. 你想添加一个复选框，在设定的截止日期后禁用促销功能

让我们整理一下代码

为产品和集合使用适当的专用输入设置，而不是在设置中粘贴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"
}

不幸的是，我们无法对此输入进行客户端验证，因此我们可能会在不信任用户的情况下在liquid中使用此设置(更好地解释，如果截止日期输入无效，那么如果截止日期已过，则表现为相同的广告)。

基本上不需要使用split过滤器解析输入文本，并将其与now进行比较。请参阅您的线路assign todaynumber = 'now' | date: '%u'。。。一旦您将比较包含在布尔值中，您就可以使用此变量将迄今为止生成的所有代码封装在一个大的if语句中。

我把实施留给你。。。