So I have been reading extensively and can't seem to find

So I have been reading extensively and can't seem to find a good solution.

Are we still at square 1.1 with this global grid display?

This topic has been started around 3 years ago and has not really shown any sign of improvement.

This should really be supported as it is a feature that one would expect out of the box.

The point of a global shortcode is to gather products across sites and list them. If these sites were all managed by one person it would be easy to just create pics and totally style it the way you want and just link the images or buttons to that product page where the styling isn't as bad.
But since most people think of multisite as an opportunity to offer space on a network, the above option is not ideal! Ideally we should be able to automatically fetch products globally and list them on whatever page in an eye-pleasing way.

I've read themeing marketpress, but not really sure how it applies to this as all it is is instructional text with no photos to show potential.

If I am misunderstanding something please point me in the right direction :slight_smile:

  • josh

    ** On a side note - My new threads wont save the title. Instead it grabs the text from my actual post. Sorry if this makes my thread harder to find, but IDK how to fix it.

    Going back to the topic

    https://premium.wpmudev.org/blog/the-easy-guide-to-theming-marketpress/

    Is my best option for styling, creating a template? If I create a Global Product List Template will I be able to achieve much better styling?

    Also, it would be nice to have WPMU Dev offer templates. We can view them on the WPMU Dev site, then get the code and implement it into our site.

  • DavidM

    Hi @Josh,

    I was wondering how this might work for you? A bit of custom CSS that will display the global product list in a grid format.

    div#mp_product_list .product {
      display: inline;
      float: left;
      width: 29%;
      margin: 2%;
    }
    
    div#mp_product_list .product:nth-child(3n+1) {
      clear: both;
    }
    
    @media all and (max-width: 800px) {
      div#mp_product_list .product {
        width: 46%;
        margin: 2%;
      }
      div#mp_product_list .product:nth-child(3n+1) {
        clear: none;
      }
      div#mp_product_list .product:nth-child(2n+1) {
        clear: both;
      }
    }
    
    @media all and (max-width: 500px) {
      div#mp_product_list .product {
        width: 100%;
        margin: 0;
      }
    }
    
    div#mp_product_list .product img.alignleft, .entry-content .wp-caption.alignleft {
      margin-left: 0px; /* image alignment adjustment for Twenty-Thirteen theme */
    }

    You can easily put that to use with the following too:
    http://wordpress.org/plugins/imporved-simpler-css/

    Or you could include it in your main site's CSS file for your theme.

    Could you let us know how that might work for you?

    Thanks,
    David

  • josh

    I Can See The Light!!!!!!!! You are amazing!

    Can't believe it was that simple!

    now to work on the other things.

    1. Seller Name w/ link to shop

    Can I "add filter" this in?
    Is there a list of filters handy for marketpress? So i can play around with it. I'm not that good yet, but maybe I'll get lucky!

    2. To add a border%
    I'm sure this is just CSS.
    I used firbug and got a 1px solid border around the container, but the pic was a little out of the right border. I would also like to give it some space on the sides, but not sure how to do this. Everything I try doesn't add space inside the container. I tried using the pic's container but that didn't work either.

    Some screen shot's below

  • DavidM

    Hi Josh,

    Wow, $10 for a Jaguar! Sign me up for a dozen. Pretty sure I can sell 'em back for thousands on the black market! :wink:

    You can increase the padding to add some space, like so for example:

    div#mp_product_list .product {
        padding: 20px 20px 20px 30px;
    }

    That last 30px value helps to account for the added space on the left.

    As for the site name inclusion though, that would require altering the shortcode itself. The current shortcode doesn't have a hook to add content. In this case, you'd want an action hook (do_action).

    Since there is none, it would probably be better to just copy all the shortcode's code (mp_list_global_products function in marketpress-ms.php) and paste it into a new plugin file to make adjustments there (being sure to change the function name to avoid conflicts, of course).

    I'll have a look at how that might be simplified but I'm not sure there's currently a better way. Would be really great to have an option to display the site's title in the global listing though, so I'll see what I can find about that.

    Cheers,
    David

  • josh

    Thanks David!

    It definitely helps me out, but it will also help others out for sure!
    The good thing about the forums is that you can point people back here to answer their questions.

    So I was playing around with the layout and your padding did work!
    Played around with borders and background color too. Fun stuff.

    However, I was trying to reposition the Buy Now button, but couldn't get it to take effect. I was able to reposition it in firebug.
    The path to the css file is Marketpress-->Marketpress-includes-->themes-->icons.css

    I have my style.css file for my theme (child theme) and am trying to target that button but can't figure it out.

    I tried: `div#mp_product_list .mp_link_buynow {
    float: right
    margin: 10px 5px 5px 5px;`

    and `.mp_link_buynow {
    float: right
    margin: 10px 5px 5px 5px;`

    but it didn't work.
    Any ideas? (i'm betting its really simple)

    And thanks for looking into the action hooks!

  • josh

    Nevermind on the CSS for the buy now button.

    I just went to the orignal css file (file path described above) copied the line and added margin.

    Here is what I came up with .mp_link_buynow { float: right; margin: 10px 5px 5px 5px; }

    For anyone reading: tailor it to your preference. This is based on the padding I chose here: `div#mp_product_list .product {
    padding: 20px 5px 20px 5px;
    }`

    Still looking forward to the action hooks! :slight_smile:

  • josh

    CSS So far

    /* Marketpress Grid CSS for global shortocode*/
    div#mp_product_list .product {
      display: inline;
      float: left;
      width: 29%;
      margin: 2%;
      padding: 0px 0px 10px 0px;
      border: none;
      border-radius: 5px;
      background-color: #ffffff;
    
    }
    
    div#mp_product_list .product:nth-child(3n+1) {
      clear: both;
    }
    
    @media all and (max-width: 800px) {
      div#mp_product_list .product {
        width: 46%;
        margin: 2%;
      }
      div#mp_product_list .product:nth-child(3n+1) {
        clear: none;
      }
      div#mp_product_list .product:nth-child(2n+1) {
        clear: both;
      }
    }
    
    @media all and (max-width: 500px) {
      div#mp_product_list .product {
        width: 100%;
        margin: 0;
      }
    }
    
    div#mp_product_list .product img.alignleft, .entry-content .wp-caption.alignleft {
      margin-left: 0px;
      margin-top: -8px; /* image alignment adjustment for Twenty-Thirteen theme */
    }
    
    /* CSS for buy now button
    div#mp_product_list .mp_link_buynow {
    	float: right
    	margin: 10px 5px 5px 5px;
    } */
    .mp_link_buynow { float: right; margin: 10px 5px 5px 5px;  }
    
    .mp_product_price {
    	line-height: 40px;
    	background: none;
    	margin-right: 10px;
    	padding: 0px 0px 0px 8px;
    	/*edit position*/
    	position: absolute;
    	top: 405px;
    	font-family: "century gothic";
    	text-decoration: underline;
    
    }
    
    /*edit position for title*/
    #top h1 a, #top h2 a, #top h3 a, #top h4 a, #top h5 a, #top h6 a { font-weight: inherit; text-decoration: none; color: inherit;
    	position: absolute;
    	top: 385px;
    	left: 27px; }
    	font-family: "book antiqua"
    
    .mp_product_image_list, .mp_product_image_single, .mp_product_image_widget {
    -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
    border: none;
    
    }

    I had to edit my theme's text header css. I labeled it /* edit position for title*/

    Also to get those arrows off the buy now button I wet into Plugins-->Marktepress-->Marketpress-includes-->marketpress-ms.php
    and changed line 1390 where it says ('Buy Now »', 'mp') to(Buy Now' , 'mp':wink:`

    This doesn't behave too well responsively though and haven't tested with different image sizes and title lengths yet.

  • Ash

    Hi David,

    You have done really a good job :slight_smile:

    @josh, editing the code plugin file is not a good idea unless you really need to. As these changes will be overwritten when you will update your plugin. It's better to use a language file and make your text changes in that language file, so that it won't be lost in update.

    Do you have a live link so that we can see the output of the work so far? :slight_smile:

    Cheers
    Ash

  • josh

    Here it is and here is the screen shot below. I added the ... for long titles and set a mex height for vertical pics. This should give it more of a uniform grid appearance rather than a masonry effect.

    /* Marketpress Grid CSS for global shortocode*/
    div#mp_product_list .product {
      display: inline;
      float: left;
      width: 29%;
      margin: 2%;
      padding: 0px 0px 10px 0px;
      border: none;
      border-radius: 5px;
      background-color: #ffffff;
    
    }
    
    div#mp_product_list .product:nth-child(3n+1) {
      clear: both;
    }
    
    @media all and (max-width: 800px) {
      div#mp_product_list .product {
        width: 46%;
        margin: 2%;
      }
      div#mp_product_list .product:nth-child(3n+1) {
        clear: none;
      }
      div#mp_product_list .product:nth-child(2n+1) {
        clear: both;
      }
    }
    
    @media all and (max-width: 500px) {
      div#mp_product_list .product {
        width: 100%;
        margin: 0;
      }
    }
    /*CSS for image*/
    div#mp_product_list .product img.alignleft, .entry-content .wp-caption.alignleft {
      margin-left: 0px;
      margin-top: -28px; /* image alignment adjustment for Twenty-Thirteen theme */
      max-height: 187px;
      width: 100%;
    }
    
    /* CSS for buy now button*/
    .mp_link_buynow { float: right; margin: 10px 5px 5px 5px;  }
    
    /*CSS for price container*/
    .mp_product_price {
    	line-height: 40px;
    	background: none;
    	margin-right: 10px;
    	padding: 0px 0px 0px 8px;
    	/*edit position*/
    	position: relative;
    	top: 23px;
    	font-family: "century gothic";
    	text-decoration: underline;
    
    }
    
    /*edit position for title*/
    #top h1 a, #top h2 a, #top h3 a, #top h4 a, #top h5 a, #top h6 a { font-weight: inherit; text-decoration: none; color: inherit;
    	position: relative;
    	top: 193px;
    	left: 5px;
    	font-family: "book antiqua";
        max-width: 195px;
    	max-height: 20px;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    	overflow: hidden;
    	display: block;
    }
    
    /*Get rid of pic shadow, was displaying weird border*/
    .mp_product_image_list, .mp_product_image_single, .mp_product_image_widget {
    -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
    border: none;
    
    }

    Does anyone know how to center the pics?

    As you can see in the screenshot the pic on the left is not centered. The pic was big, but I think that when it gets scaled down the proportions get constrained to one another.

    But I would like to center the pic so it doesn't look so bad.

  • DavidM

    Hi @Josh,

    Looking good so far!

    We can delve into your question about the language files through a new topic so as to keep things from getting confusing.

    Line 1243 of marketpress-ms.php begins the mp_list_global_products() function that's used by the global products list shortcode.

    On line 1341 you'll see the switch_to_blog() function being used:
    switch_to_blog($product->blog_id);

    To add the blog/site title in the shortcode, that would probably be the optimal place to include it.

    Probably the simplest way to tackle it all would be to copy that whole function over to a new shortcode plugin, changing the function and shortcode name of course, making your further changes, and then network activate that.

    It's a bit much, but until the plugin has that sort of option available, that seems to be the optimal solution.

    Cheers,
    David

  • josh

    Okay @DavidM
    the thread has been started for the language file part.

    Here it is: https://premium.wpmudev.org/forums/topic/how-to-use-a-language-file-to-edit-plugin-output-text?replies=1#post-584682

    Thanks for your help.

    I'm sure I'll have questions regarding the adding of the shop name plugin, but I'll spend some time and have a go at it. Maybe I'll get lucky :slight_smile:

    Also, do you know (or anyone) how to center the image. In the screen shot, the product with the boat is off to the left. I posted my CSS too. Just up above a few posts.
    thanks

  • DavidM

    Hi @Josh,

    Typically margin:auto will center things though without a direct link to test it with your setup, I'm not entirely sure what other adjustments might be needed.

    Perhaps just this?

    div#mp_product_list .product img.alignleft, .entry-content .wp-caption.alignleft {
      margin: auto;
    }

    Admittedly, it's not intuitive to center an 'img.alignleft' but for simplicity's sake! :slight_smile:

    Cheers!
    David

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.