How to implement IEnumerator in MVC4 application with ViewModel

I am trying to return two models in one view in my MVC4 project by following this tutorial. I have one Model named Product that looks like this:

public class Product : IEnumerable<ShoppingCartViewModel>, 
                           IList<ShoppingCartViewModel>
    {
        public int ProductId { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        (...)
    }

And a ViewModel with a list of ShoppingCarts (List) that looks like this:

public class ShoppingCartViewModel : IEnumerable<Product>, IList<Product>
    {
        public List<Cart> CartItems { get; set; }
        public decimal CartTotal { get; set; }
    }

I have one "wrapper model" that does the following:

public class ProductAndCartWrapperModel
    {
        public Product product;
        public ShoppingCartViewModel shoppingCart;

        public ProductAndCartWrapperModel()
        {
            product = new Product();
            shoppingCart = new ShoppingCartViewModel();
        }
}

Then I try to simply display the view with the two different models in this way

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<projectname.ProductAndCartWrapperModel>" %>
(...)
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <% foreach (projectname.Models.Product p in
                                     ViewData.Model.product) { %>
        <div>
            <div id="ProductName"><%: p.Name %></div>
            <div id="ProductPrice"><%: p.Price %></div>
        </div>
        <% } %>
    </div>
    <div>
        <% foreach (projectname.ViewModels.ShoppingCartViewModel sc in 
                   ViewData.Model.shoppingCart) { %>
        <div>
            <div id="Div1"><%: sc.CartItems %></div>
            <div id="Div2"><%: sc.CartTotal %></div>
        </div>
        <% } %>
    </div>

</asp:Content>

Unfortunately, when trying to build I get one error

Cannot convert type 'projectname.Models.Product' to
'projectname.ViewModels.ShoppingCartViewModel'

followed by a list of errors that look like this for both the models:

does not implement interface member 
'System.Collections.Generic.IEnumerable<projectname.ViewModels.ShoppingCartViewModel>.
 GetEn umerator()'. 'projectname.Models.Product.GetEnumerator()' cannot implement  
'System.Collections.Generic.IEnumerable<projectname.ViewModels.ShoppingCartViewModel>.
 GetEnumerator()' because it does not have the matching return type of 
'System.Collections.Generic.IEnumerator<projectname.ViewModels.ShoppingCartViewModel>'.

I have the feeling I am quite close to displaying both of the models on one page, but I do not know how to implement the IEnumerator and get the types to match. I tried to add one like this:

public IEnumerator<Object> GetEnumerator()
    {
        return this.GetEnumerator();
    }

but that was to no avail.

I would be very grateful if someone could explain how to correctly implement the interface members and get the solution to build (if possible).