Design Proposal for Example Implementation of Reviews (Category)

[fthobe]

Related to: #385

Desired Behavior

Have optional brands and reviews in category pages.

Proposed Code

<li class="aspect-square bg-gray-50 w-full rounded-lg md:rounded-xl lg:rounded-2xl  col-span-full md:col-span-6 lg:col-span-4" itemscope="" itemtype="http://schema.org/Product" id="product_4">
  <div class="h-screen w-full flex items-center justify-center  bg-gray-200 dark:bg-gray-800">
  <!-- product card -->
  <article class="max-w-sm w-full bg-gray-50 rounded-lg shadow-lg overflow-hidden dark:bg-gray-700">
    <div>
      <img class="object-cover h-64 w-full" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxzbmVha2Vyc3xlbnwwfDB8fHwxNzEyMjIzNDAyfDA&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080" alt="Converse sneakers">
    </div>

    <div class="flex flex-col gap-1 mt-4 px-4">
      <span class="mb-1 font-normal text-gray-600 dark:text-gray-300">Brand</span><span class="mb-3 text-lg font-semibold text-gray-800 dark:text-gray-50">Product</span>
      
      <div class="flex justify-left gap-2 mb-3">

    <div class="flex">
        <svg xmlns="http://www.w3.org/2000/svg" class="text-yellow-500 w-5 h-auto fill-current hover:text-red-600" viewBox="0 0 16 16">
            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="text-yellow-500 w-5 h-auto fill-current hover:text-yellow-600" viewBox="0 0 16 16">
            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="text-yellow-500 w-5 h-auto fill-current hover:text-yellow-600" viewBox="0 0 16 16">
            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
        </svg>

        <svg xmlns="http://www.w3.org/2000/svg" class="text-yellow-500 w-5 h-auto fill-current hover:text-yellow-600" viewBox="0 0 16 16">
            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
        </svg>

        <svg xmlns="http://www.w3.org/2000/svg" class="text-yellow-500 w-5 h-auto fill-current hover:text-green-600" viewBox="0 0 16 16">
            <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"></path>
        </svg>
    </div>


    <span class="font-sans">(300 Reviews)</span>
</div><span class="mb-3 font-sansserif text-gray-800 dark:text-gray-50">$60.00 - $79.99</span>

    </div>    
  </article>
</div>
</li>

[fthobe]

@jarednorman this is a draft open to be shot down. I think the shadows need to go to align with the current design language.

We could also add some tag like flags such as "New" or "Last one"

@mamhoff do you see any possibility to render anything like promotions that might be applicable or that the product qualifies for straight on the category or product page?

[mamhoff]

Check out Spree::Product#promotions. Yes, there is something called a promotion advertiser that associates active promotions with the Product rule to products. There is also an API that allows making this more complex / better / more interesting. The thing is we can't have all of the eligibility logic for each product on every re-render of e.g. a taxon page, because that quickly spirals in complexity (taking into account the current user, any conditions requiring certain quantities of even combinations of items with the current cart etc.). That's why the functionality in core Solidus is currently a stub: I have not been able to find out what people would need in terms of advertising promos on taxon pages / PDPs. Stores seem to have wildly varying needs around this.

[fthobe]

@mamhoff mostly the two things below in my personal oppinion. I understand that technical limitations regarding performance are an issue here (BigCommerce struggled with it for years).

1. A text string inside the promotion ressource to describe the promotion and be displayed inside PDP would be great to indicate available promotions. The notice should be given upon the possibility to meet promotion requirements (for example an SKU that qualifies).

2. A simple flag on category pages would be great

[fthobe]

@kennyadsl @jarednorman is it possible to get a feedback, it's open for some time now? It would help us to conclude the solidus_reviews extension update

[jarednorman]

If you're asking whether the review module you posted is acceptable looking, yes it is.

[fthobe]

@kennyadsl @tvdeyen could you both also give a thumbs up / down so that we know if we can proceed here? I would also note that the radius renders really nice on large pictures, but on product cards with more information it's wasting a lot of space, do we maybe want to adjust the radius to something less space intensive, but this would go down better if we adjust also the radius of the currently pill shaped buttons. I think a radius of 5 would also slightly refresh the solidus.io page and make it a little bit more bold.